I want to uncheck box and disable the button, Which only works when opened for the first time.
Here is my template:
<form>
<div class="container">
<div *ngFor="let row of interpreterLists; index as i"
class="row">
<div>
<mat-checkbox type="checkbox"
[value]="row.id"
name="{{row.name}} {{ row.lastname }} ({{ row.work_inprogress }}/{{ row.work_success }})"
(chang)="onChange()"
[(ngModel)]="selectedInterpreter[i]"
#shoes>
{{row.name}}
{{ row.lastname }}({{row.work_inprogress
}}/{{
row.work_success }})
</mat-checkbox>
</div>
</div>
</div>
</form>
<button mat-raised-button class="btn btn-success md-warn"
(click)="assignJob(documentDetail.id)"
[disabled]="selectedInterpreter.length == 0">
<i class="material-icons">check</i> <span class="mat-button-wrapper">สั่งงาน</span>
</button>
Here is my component
getInterpreters(department_id, doc_id) {
let params = {
department_id: department_id,
doc_id: doc_id
}
this.userService.getInterpreters(params, 'Bearer ' + this.token).subscribe(res => {
if (res) {
this.interpreterLists = res;
this.selectedInterpreter = [];
for (let i = 0; i < this.interpreterLists.length; i++) {
if (this.interpreterLists[i].readyexist === 'Yes') {
this.selectedInterpreter.forEach(item => {
item.checked = false;//change as per your requirement
});
this.selectedInterpreter.push(this.interpreterLists[i].id);
}
}
console.log('dhduchd', this.selectedInterpreter);
} else {
this.selectedInterpreter.forEach(item => {
item.disabled = true;//change as per your requirement
});
console.log('fail: ');
}
})
}
This is the web page