[英]change text dynamically based on checkbox value
using FormArray
I had bind checkbox on my component, default label
of checkbox is select , when I clicked checbox, label
will change to selected for each of checkbox (supposed to be), I also got selectAll
button which change value of all checkbox to true
and change text to selected , my problem is:使用FormArray
我在我的组件上绑定了复选框,复选框的默认label
是select ,当我单击复选框时, label
selectAll
改为选中的每个复选框的所有复选框(所有复选框的更改true
)并将文本更改为selected ,我的问题是:
label
will also effected other checkbox当我 select 只有一个复选框时,更改label
也会影响其他复选框selectAll
checkbox, all checkbox label will change to selected ,then if I unselected individual checkbox, it supposed to be change label
to select当我有selectAll
复选框时,所有复选框 label 将更改为选中,然后如果我取消选中单个复选框,它应该将label
更改为selectthis is what I had tried:这是我尝试过的:
html file html文件
<div *ngIf="isShowResponse">
<p>Inquiry Response</p>
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
<ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
<ng-container [formGroupName]="i">
<input type="checkbox" formControlName="isChecked"
(change)="checkedState(summon)">
{{ summonText }}
</ng-container>
</ng-container>
</form>
<!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>
ts file ts文件
checkedState(summon) {
summon.checked = !summon.checked;
this.summonText = summon.checked === true ? 'selected' : 'select';
}
selectAll() {
this.formReceivedSummons.controls.map(value => value.get('isChecked').setValue(true));
return this.summonText = 'selected';
}
and this is my full stackblitz demo , i could use some suggestion and better practice to solve this problem这是我完整的 stackblitz 演示,我可以使用一些建议和更好的实践来解决这个问题
<div *ngIf="isShowResponse">
<p>Inquiry Response</p>
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
<ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
<ng-container [formGroupName]="i">
<input type="checkbox" formControlName="isChecked">
{{ summon.get('isChecked').value ? 'selected' : 'select' }}
</ng-container>
</ng-container>
</form>
<!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>
https://stackblitz.com/edit/angular-43suh3?file=src/app/inquiry-response/inquiry-response.component.html https://stackblitz.com/edit/angular-43suh3?file=src/app/inquiry-response/inquiry-response.component.html
I've done some changes, you can try this:我做了一些改变,你可以试试这个:
HTML HTML
<div *ngIf="isShowResponse">
<p>Inquiry Response</p>
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
<ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
<ng-container [formGroupName]="i">
<input type="checkbox" [checked]="summon.checked" formControlName="isChecked"
(change)="checkedState(summon)">
{{ summon.checked === true ? 'selected' : 'select' }}
</ng-container>
</ng-container>
</form>
<!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>
In functions:在函数中:
selectAll() {
this.formReceivedSummons.controls.map((summon: any) => {
summon.checked = true;
});
}
checkedState(summon) {
summon.checked = !summon.checked;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.