How to set rest values based on default checkbox using Angular2

Question

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

Християн Христов · Accepted Answer · 2021-03-31 14:54:39Z

1

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.

answered Mar 31, 2021 at 14:54

Християн Христов

3,5881 gold badge17 silver badges28 bronze badges

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

12 Comments

Bhrungarajni Over a year ago

Thanks for response, but sorry i am not able to run output

Християн Христов Over a year ago

What do you mean by run output?

Християн Христов Over a year ago

Try this link stackblitz.com/edit/stackoverflow-checkbox-question?file=src/…

Bhrungarajni Over a year ago

I tried this link, but my requirement is different, in the first row, (Flowers row), we have mail, electronics, Delivery dropdown, Recepient, when Make Default is checked, what mail value, electronic value, delivery dropdown value, recepient value is present for Flowers row, should be copied to all rows, something like If selected, copy the field values (check boxes, drop down, and text box) to all other rows.

Християн Христов Over a year ago

Check the link again, i've made it so that whenever you click the "Make the same as firt rows" button the value from the first row will be applied across the rest of the rows, the logic is the same as with the checkboxes, the only difference is that here im updating the form itself instead the array of elements

|

Collectives™ on Stack Overflow

How to set rest values based on default checkbox using Angular2

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related