时间戳

首页 > 解决方案 > 根据复选框值动态更改文本

javascript - 根据复选框值动态更改文本

问题描述

使用FormArray我在我的组件上绑定了复选框，label复选框的默认值为select，当我单击复选框时，label将为每个复选框（应该是）更改为选中selectAll状态，我还得到了将所有复选框的值更改为true并将文本更改为选中的按钮，我的问题是：

这是我尝试过的：

.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文件

    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';
  }

这是我完整的stackblitz 演示，我可以使用一些建议和更好的实践来解决这个问题

标签： javascriptangulartypescriptcheckbox

解决方案

<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

推荐阅读