Angular 5 reactive form set mat-checkbox to check

Question

I am trying to use mat-checkbox with reactive forms on Angular 5.1.2 and Angular Material 5.0.2.

Everything is working well except that when I use patchValue({amateur: [false]) it is still checked. What is weird is I have other forms where I am doing the same thing and they work fine. It also isn't just the amateur checkbox, it is all the checkboxes are checked. Just using "amateur" as an example.

The formControl amateur.value is always false. However once the patched value is executed, the control is checked.

What am I missing?

HTML5

 <form [formGroup]="showClassGrp">
   <mat-checkbox id="amateur" class="amateur" color="primary" 
      formControlName="amateur">Amateur</mat-checkbox>
 </form>

TypeScript

FormBuilder works and display is correct.

this.showClassGrp = this.fb.group({

  ...
  amateur: [false],
  ...
});

patch showClassGrp and all the checkboxes are checked even thou the formControl value for them are false.

    this.showClassGrp.patchValue({
      className: [this.showClass.className],  //this works
      amateur: [false],  // this changed the display to checked.
      ...
});

Try patchValue({amateur: false}) (single value instead of array) — Harry Ninh
– Harry Ninh, Commented Dec 28, 2017 at 1:40
You are so right! I knew it was something stupid, but I just couldn't see it. As soon as I read you answer I knew where I went wrong. Thanks — Darryl Wagoner WA1GON
– Darryl Wagoner WA1GON, Commented Dec 28, 2017 at 1:48

Iancovici · Accepted Answer · 2017-12-28 01:45:27Z

39

If you're using reactive from, you may want to assign a FormControl to each member in the form. Something like this

component.ts

  showClassGrp: FormGroup;

  constructor() { }

  ngOnInit() {


    this.showClassGrp = new FormGroup({
      'amateur': new FormControl(false),
    });

  }

  onSubmit(){
    console.log(this.showClassGrp.value.amateur);
    this.showClassGrp.patchValue({amateur: false});
    console.log(this.showClassGrp.value.amateur);
  }

component.html

<form [formGroup]="showClassGrp" (ngSubmit)="onSubmit()">
  <mat-checkbox id="amateur" class="amateur" color="primary"
                formControlName="amateur">Amateur</mat-checkbox>
  <button class="btn btn-primary" type="submit"> Submit </button>
</form>

edited Dec 28, 2017 at 1:45

answered Dec 28, 2017 at 1:32

Iancovici

5,7317 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darryl Wagoner WA1GON Over a year ago

You are also correct. Silly me just cut and pasted the formbuilder code with the arrays in it, instead of the values. Thank you.

João Paulo Paiva · Accepted Answer · 2024-02-05 14:51:32Z

0

You also try this way:

component.ts

showClassGrp: FormGroup;
construct(private formBuilder: FormBuilder){}

ngOnInit() {
  this.showClassGrp = this.formBuilder.group({
    amateur: [false]
  });

  this.showClassGrp.patchValue({ 
    amateur: true,
  }
  console.log(this.showClassGrp.value.amateur);
}

answered Feb 5, 2024 at 14:51

João Paulo Paiva

2,2071 gold badge12 silver badges5 bronze badges

Collectives™ on Stack Overflow

Angular 5 reactive form set mat-checkbox to check

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related