[Fixed] How to set rest values based on default checkbox using Angular2

Issue

Hi i am using Angular8 with Bootstrap, here i have used reactive forms, when i check on Make Default checkbox, then values present in Flowers row (Mail, Electronic,Delivery and Receipent)should be copied same to rest rows.

If the fax number format is not proper, how to show error message just below particular row recepient.

Ts:

 checkAll(ev) {
    const control = <FormArray>this.exampleForm.get("printList");
    if (!this.all) {
      this.printListArray.forEach(x => (x.value = false));
      control.patchValue(this.printListArray);
    } else {
      this.printListArray.forEach(x => (x.value = true));
      control.patchValue(this.printListArray);
    }
    console.log(control.value);
  }

  isAllChecked() {
    this.all = !this.all;
  }

DEMO

Solution

Your code should work more like the following

  checkAll(ev) {
    const control = <FormArray>this.exampleForm.get("printList");
    console.log(this.all);
    if (this.all) {
      this.all = false;
      this.printListArray.forEach(x => (x.electronics = false));
      control.patchValue(this.printListArray);
    } else {
      this.all = true;
      this.printListArray.forEach(x => (x.electronics = true));
      control.patchValue(this.printListArray);
    }
  }

The main difference is that instead of changing the value field of x I’m changing the electronics fields, so when you are patching the form latter on, this.printListArray will have the appropriate data in the appropriate state.

In the implementation that I’m suggesting you will be able to toggle all checboxes in the row Electronics

Keep in mind that the printListArray is not an array form FormGroup/FormControl, its an array of regular objects, so the field value that usually exists in the FormControl is not present.