Angular 响应式表单处理两个级别/维度的复选框

Question

我正在使用 Angular 6/7 和 反应式 表单，我有一个带有权限列表的表单（一行中有两个复选框），例如，假设每个复选框都是一个权限，默认情况下，该行中的第二个复选框需要在第一次加载时禁用，并且仅当用户 clicks/checks 行中的第一个复选框时才启用。

流量：

用户只能点击行中的第一个复选框，例如权限 1、2、3 或 4。
如果用户clicks/checks行中的第一个复选框，onChange事件我需要启用第二个复选框。
提交时 - 我需要获取权限 ID，如果用户单击行中的第二个复选框，我需要 fetch/save 该信息作为布尔标志，例如，让说 canGrantPermission: true/false.

超级简单的代码示例： https://stackblitz.com/edit/angular-ibb7ps

最后我想要这样的东西：

permissions: [
  {permissionId: 1, canGrant: false}, 
  {permissionId: 2, canGrant: true}
]

Answer 1

以下解决方案基于您不需要 FormControl 第二个复选框的假设，如果您需要，请告诉我。

您可以执行以下操作来完成此操作。

在输入 one

上创建 templatRef #firstCheck

<input #firstCheck type="checkbox" [formControlName]="i" (change)="onPermissionChange(i)">

在输入两个禁用的第二个检查是否 #firstCheck 被选中 [disabled]="!firstCheck.checked"，然后创建 tempalteRef #secondCheck 并在单击时将 secondCheck.checked 值设置为 orders.allowGrant。

<input #secondCheck type="checkbox" [disabled]="!firstCheck.checked" (click)="orders[i].allowGrant = secondCheck.checked">

在 submit() 中将值推送到 resultsArray 如果第一个框被选中并且 console.log

  const resultsArray = []
      for(let i = 0; i < this.form.get('orders').value.length; i++){
        if(this.form.get('orders').value[i]){
          resultsArray.push({id:this.orders[i].id, allowGrant:this.orders[i].allowGrant})
        }
      }

    console.log(resultsArray);

要在第一次取消选择时取消选中第二个复选框，您可以执行如下操作。

我在没有方法的视图中完成了这一切...在第一次点击时将 secondCheck 和 allowGrant 设置为 false，在 secondCheck 上使用 (change) 而不是 (click) 就像我以前一样。

 <input #firstCheck type="checkbox" [formControlName]="i" (change)="onPermissionChange(i); secondCheck.checked = false; orders[i].allowGrant = secondCheck.checked">
    <input #secondCheck type="checkbox" [disabled]="!firstCheck.checked" (change)="orders[i].allowGrant = secondCheck.checked">  </label>

请参阅修改后的 stackblitz

Stackblitz

https://stackblitz.com/edit/angular-xpcz82?embed=1&file=src/app/app.component.html

Angular 响应式表单处理两个级别/维度的复选框

Angular Reactive Forms handle two level / dimensional checkboxes

angular

angular-reactive-forms