CODEWITHSUNDEEP
angularcheckboxangular-material
flamant
flamant

Reputation: 783

mat-checkbox unexpected behaviour

I use mat-checkbox within angular application. Globally my issue is the following: I have a formGroup including a mat-checkbox and a text input field. When I click on the mat-checkbox, I instanciate a new FormGroup with the same fields as previous, plus another text field. The value of the mat-checkbox is true and it is checked. Then, I click again on the checkbox to uncheck it and instanciate again the first FormGroup, but it stays checked while it should be unchecked

Here is the demo: (https://stackblitz.com/edit/angular-dy7s9u?file=src%2Fapp%2Fapp.component.html)

Apply following steps: 1) enter "Dupont" as name -> OK

2) check the box. The state of the box is checked. The value of the formControlName is true. The adresse field appear. -> OK

3) enter an adress (for example "19 Christchurch Road") -> OK

4) uncheck again the mat-checkbox. -> NOT OK the state of the mat-checkbox should become unchecked with a value false for the FormControlName and it is the contrary

Upvotes: 2

Views: 1235

Answers (1)

Anoop Rajasekhara Warrier
Anoop Rajasekhara Warrier

Reputation: 1050

This is not an issue with mat-box. Actually this is due to some issues with the logic of dynamically defining the formGroup. The issue can fixed using [hidden] instead of *ngIf to hide or show the Address control. By doing so, we can go with normal Reactive Form approach. I am not sure if this will help you. Consider this as an alternate solution:

In HTML:

<mat-dialog-content  class="colorOpacity7" [formGroup]="dialogFormGroup">
  <div>
    <div>   
     <mat-form-field>
      <input  matInput type="text" placeholder="Nom" formControlName="name">
     </mat-form-field>                  
    </div>
    <div>
     <mat-checkbox formControlName="RAS">Extend</mat-checkbox>
    </div>  
  </div>
  <div [hidden]="!dialogFormGroup.value.RAS">
   <div>    
    <mat-form-field>
     <input  matInput type="text" placeholder="Adresse" formControlName="adress">
    </mat-form-field>                   
   </div>
  </div>
</mat-dialog-content>

In TS:

import { Component, OnInit, Inject, HostListener } from "@angular/core";
import {
  FormBuilder,
  FormGroup,
  FormControl,
  Validators
} from "@angular/forms";
import { Subscription } from "rxjs";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
 public dialogFormGroup: FormGroup;

 constructor(private formBuilder: FormBuilder) {}

 ngOnInit() {
  this.intializeForm();
  this.dialogFormGroup.valueChanges.subscribe(data => {
    if(!data.RAS) this.dialogFormGroup.value.adress="";
    console.log('Form value: ', this.dialogFormGroup.value);
  });
 }

 private intializeForm() {
  this.dialogFormGroup = this.formBuilder.group({
    name: ["", Validators.required],
    RAS: [false],
    adress: ["", Validators.required]
  });    
 }
}

Hope this will do the job. Pleas find below the DEMO:

https://stackblitz.com/edit/angular-sf-reactive-from-issue?file=src/app/app.component.ts

https://angular-sf-reactive-from-issue.stackblitz.io

Upvotes: 1

Related Questions