mercredi 25 avril 2018

How can I make angular material checkbox react to programmatic change of value in a reactive from?

I have a reactive angular form set up to be able to add rows via a button. I'd like to add the ability to select all rows.

Each row has a checkbox associated with it that changes the value in the object depending on its state (T or F). If all rows are checked, then the 'select all' checkbox becomes T else F. The issue is when I check the 'select all' checkbox, the value of all the rows changes to whatever the value of 'select all' is but their respective checkboxes remain unchanged. I'm using material angular checkbox.

I know with two-way data binding I could probably easily fix this but I'd like to know if there's a reactive form way of doing it.

      <div class="checkbox-container">
        <mat-checkbox formControlName="selected (change)="checkAllSelected()"></mat-checkbox>
      </div>
      <mat-form-field>
        <input matInput formControlName="name">
      </mat-form-field>




Aucun commentaire:

Enregistrer un commentaire