在 Angular 中单击 'None of the above option' 时，有没有办法重置复选框项目的其余部分？

Question

我一直在努力处理带有复选框的反应式表单。

如果选择了 none 项，提交按钮应该被禁用。这是完成的
有一个名为 "None of the above" 的选项。选择此项应取消选中复选框中的所有选定项目（如果有）
选择回 'None of the above' 以外的任何项目应该取消选择 'None of the above'

HTML

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="checkbox" [formControlName]="i" (click)="onChange(orderData)">
    {{ordersData[i].name}}
  </label>
  <br>
  <button [disabled]="!form.valid">submit</button>
</form>

TS

  onChange(event) {
    console.log(event);
  }

您可以在 StackBlitz.

上找到与此相关的完整代码

Answer 1

您需要对 onChange(event) 方法进行简单的更改。您可以使用 setValue 和 patchValue 在 Angular FormArray。

将 formControlName 作为 argument 传递给 onChange 方法。在你的例子中是 index。使用 setValue 和 patchValue 将值更改为 [ 中的 elements =15=].

HTML

...
<input type="checkbox" [formControlName]="i" (click)="onChange(i)">
...

TS

  onChange(index) {
    if (index === 3)
      this.form.controls.orders.setValue([false, false, false, true]);
    else
      this.form.controls.orders.get('3').patchValue(false);
  }

StackBlitz Demo.

Answer 2

嗨，先试试这个 stackblitz https://stackblitz.com/edit/angular-nqggqr

您必须从数组中删除上述选项的 None 并放入它在 *ngFor
当用户更改复选框时，使用上述 None 的变量进行更改 <input type="checkbox" [checked]="uncheck" (change)="unCheckAll()" />
在您的 .ts 中，在 unCheckAll() 中重置您的表单，所有复选框都将被改变。
在 onChange() 中只需将 uncheck 变量设置为 false。

一切都在上面的stackblitz中实现

Answer 3

更新您的 onChange 函数以获取订单数据的对象

onChange(event: any) {
const indexOfNone = this.ordersData.findIndex(function(item, i) {
  return item.name.toUpperCase() === "NONE OF THE ABOVE";
});

if (event.name.toUpperCase() == "NONE OF THE ABOVE") {
  this.arrays.controls.forEach(e => {
    e.setValue(false);
  });
  this.form.controls.orders.get(indexOfNone.toString()).patchValue(true);
} else
  this.form.controls.orders.get(indexOfNone.toString()).patchValue(false);

}

你的html也是这样

 <input type="checkbox" [formControlName]="i" (click)="onChange(ordersData[i])" name="orders"  [value]="ordersData[i].name"  >
{{ordersData[i].name}}

随意取出循环const indexOfNone = this.ordersData.findIndex(function(item, i) { return item.name.toUpperCase() === "NONE OF THE ABOVE"; }); 到某个全局的地方，也许如果值在初始化时间后不会改变，那应该最小化性能成本，因为它不需要在每次更改复选框值时都循环。

在 Angular 中单击 'None of the above option' 时，有没有办法重置复选框项目的其余部分？

Is there a way to reset the rest of the checkbox item when clicking 'None of the above option' in Angular?

checkbox

typescript

angular

angular-reactive-forms

formgroups