CODEWITHSUNDEEP
angular-material
IMRUP
IMRUP

Reputation: 1513

mat checkbox not clearing when cancel form button clicked

I have a list of cities in a form with check box. when trying cancel form , the list of checkboxes checked are not clearing . but when i uncheck each of the checkbox, it works

api-model.ts

export interface City{
  city_Name: string;
}

class-model.ts

 export class eModel {
     cityList: Array<City>=[];
    }

app.html

<div class="row">
                <div class="column-3">
                  <div *ngFor="let data of cityData; let i=index">
                    <mat-checkbox color="primary"  (change)="getCheckboxValues(data, i, $event)" >
                      &nbsp; {{data.city_Name}}
                    </mat-checkbox>
                  </div>
                </div>
</div>



 <button mat-raised-button class="cancel-button" (click)="Cancel()">Cancel</button>

app.ts

cityData: City[] = [];

 ngOnInit(): void {
 this.eModel.cityList = [];
loadCityList();

}
loadCityList() {
    return this._getAPIservice.getCity().subscribe(data => {
      this.cityData = data;
 });
  }
Cancel(): void {
 this.eForm.resetForm({});
 loadCityList();
 this.eModel.cityList = [];
}

Upvotes: 1

Views: 495

Answers (1)

Asna Khan
Asna Khan

Reputation: 253

This can be achieved by using element reference variable.

Try this:

<div class="row">
                <div class="column-3">
                  <div *ngFor="let data of cityData; let i=index">
                    <mat-checkbox #chkboxes color="primary"  (change)="getCheckboxValues(data, i, $event)" >
                      &nbsp; {{data.city_Name}}
                    </mat-checkbox>
                  </div>
                </div>
</div>
<button mat-raised-button class="cancel-button" (click)="Cancel()">Cancel</button>

In ts:

@ViewChildren('chkboxes') chkboxes: QueryList<any>; // Define this at the top

Cancel(){
    this.chkboxes.forEach(x => x.checked = false);
}

Upvotes: 2

Related Questions