如何有效管理窗体上的两类控件？

Question

在一个表单上我有两类（或更多）控件（目前只有复选框）：

<form [formGroup]="form">
  <div class="category 1">
    <mat-checkbox formControlName="cb1">Checkbox 1</mat-checkbox>
    <mat-checkbox formControlName="cb2">Checkbox 2</mat-checkbox>
  </div>
  <div class="category 2">
    <mat-checkbox formControlName="cb11">Checkbox 11</mat-checkbox>
    <mat-checkbox formControlName="cb12">Checkbox 12</mat-checkbox>
  </div>
  ...
</form>

根据窗体上的其他操作，我需要控制类别的状态，即 enable/disable 和 check/uncheck 所有控件。所以我需要一种方法来有效地迭代一个类别。目前我想出了一个基于 this 答案的解决方案，但这需要维护每个类别的名称列表。

是否有 nicer/easier 遍历我的类别的方法？

Answer 1

高级 - FormGroup 类型有一个 controls 属性，它是以下类型 {[key: string]: AbstractControl} 的对象，参见 angular docs。

从技术上讲，您可以使用 for (const key in obj) 构造和操作表单控件来迭代对象属性。

根据 Angular docs，您可以嵌套 FormGroup 个组件来创建更好地管理控件行为所需的结构。

Answer 2

如果我没看错你的问题，你只需要enable/disable和check/uncheck根据条件勾选对吧？

您可以在 HTML 本身中执行类似的操作

<mat-checkbox> 在其 API 中具有 [disabled] 和 [checked] 属性。你可以利用它。

可以使用*ngIf来控制条件。

结果会是这样：

 <form [formGroup]="someForm">  // Don't name your form as 'form'. Not a good practice
  <div class="category 1">
    <mat-checkbox formControlName="cb1">Checkbox 1</mat-checkbox>
    <mat-checkbox formControlName="cb2">Checkbox 2</mat-checkbox>
  </div>

// Enable the second category only if both the above checkboxes are having a value
  <div class="category 2" *ngIf="someForm.controls.cb1.value && someForm.controls.cb2.value"> 
    <mat-checkbox 
        formControlName="cb11"
        [disabled]="!someForm.controls.cb1.value"  // This will be disabled if the value is false which will make the condition true
    >
       Checkbox 11
    </mat-checkbox>


    <mat-checkbox 
       formControlName="cb12"
       [checked]="someForm.controls.cb1.value" // It will be checked only if cb1 is checked
    >
       Checkbox 12
    </mat-checkbox>
  </div>
  ...
</form>

您不必总是从 TS 执行此操作。但是如果你想在 TS 中这样做，你会写一些非常相似的东西：

this.someForm.controls.cb1.valueChanges.subscribe(data => {
   if (data) {
     this.someForm.controls.cb2.disable();

     // After this you can remove the validators for the disabled field
     this.someForm.controls.cb2.setValidators(null);
     this.someForm.controls.cb2.updateValueAndValidity();
   }
})

如何有效管理窗体上的两类控件？

How to effectively manage two categories of controls on a form?

angular

typescript

angular-forms