Question

我有一个动态表格，根据APi响应会生成8个不同的复选框。现在，我希望用户一次只能选择1个复选框。如果他想选择另一个复选框，则他首先必须取消选择所选的复选框。请参考下面的代码。

<ng-container *ngIf="field.inputType==='group';else singleCase">
    <p class="font20" *ngIf="field.label">{{'label.' + field.name | translate}}</p>
    <div class="row purFin table-responsive pb-3 mb-2 mt-4">
      <div class="col-12">
        <ng-container [formArrayName]="field.name"
          *ngFor="let item of group.controls[field.name].controls; let i = index">
          <input type="checkbox" class="hidden" (click)="preventCheck($event)" (change)="onChange($event)" [formControlName]="i"
            [name]="field.name + i+1" [id]="field.name + i+1">
          <label class="btn-outline-secondary mr-3 mt-1 but" [for]="field.name + i+1">
            {{field.options[i].value}}
          </label>
        </ng-container>
        <div class="col-12">
          <span *ngIf="'sub_text.' + field.name | translate"
            class="font12">{{'sub_text.' + field.name | translate}}</span>
        </div>
      </div>
    </div>
    <div *ngIf="group.get(field.name).invalid && (group.get(field.name).dirty || group.get(field.name).touched)"
      class="error-msg">
      <ng-container *ngFor="let validation of field.validations">
        <div *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</div>
      </ng-container>
    </div>
  </ng-container>

Answer 1

可以通过多种方式来完成，对更改/单击事件做出反应并保存选中/单击的元素的名称。以下面的示例为例，也许这不是最优雅的解决方案，但实际上您可以通过多种方式实现逻辑： [HTML]

export class YourComponentClass  {
  isChecked;
  isCheckedName;
  checkboxData = [1,2,3,4,5,6,7,8];
  onChange(e){       
    this.isChecked = !this.isChecked;
    this.isCheckedName = e.target.name;
  }
}

<div *ngFor="let name of checkboxData">
<input type="checkbox" [name]="name" (change)="onChange($event)" [disabled]="isChecked && (isCheckedName!=name)"> {{'Checkbox ' + name}}
 </div>

在线：you can check it on stackblitz

如果$ event不需要太多，最好只传递给您所需的组件数据，因此您可以在html和ts代码中将其更改为onChange（$ event.target.name）。 isCheckedName = e;相应地。

祝你好运;）

Answer 2

如果您在应用中使用material / cdk，则有一个易于实施的解决方案，涉及SelectionModel，可与Reactive Forms / FormBuilder很好地配合。

在组件中声明：

selection = new SelectionModel<any>(false, []);

然后在您的模板/ html中：

  <tr *ngFor="let item of formArray['controls']; let i = index;" [formGroupName]="i" class="tr-body-format">
        <td class="td-format">
             <mat-checkbox formControlName="selected" (change)="$event ? 
                  selection.toggle(i) : null" [checked]="selection.isSelected(i)">
             </mat-checkbox>
         </td>

如何在角度8中仅选择一个动态形式的复选框

2 个答案: