Angular Reactive Forms处理两个级别/维度复选框

Question

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

流程：

1. 用户只能单击行中的第一个复选框，例如permission1,2,3或4。
2. 如果用户单击/检查行中的第一个复选框，则onChange事件我需要启用第二个复选框。
3. 在提交时 - 我需要获取权限ID，如果用户单击行中的第二个复选框，我需要将该信息作为布尔标志获取/保存，例如，让我们说canGrantPermission：true / false。

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

最后我想有这样的事情：

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

Answer 1

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

---

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

在输入一上创建templateRef qazxsw poi

#firstCheck

在输入两个禁用第二次检查<input #firstCheck type="checkbox" [formControlName]="i" (change)="onPermissionChange(i)"> 是否被检查#firstCheck，然后创建tempalteRef [disabled]="!firstCheck.checked"并在点击时将#secondCheck值设置为secondCheck.checked。

orders.allowGrant

在<input #secondCheck type="checkbox" [disabled]="!firstCheck.checked" (click)="orders[i].allowGrant = secondCheck.checked"> 中，如果选中第一个框并将console.log推送到submit()

resultsArray

---

要取消选中第二个复选框，请先取消选择，然后执行以下操作。

我在没有方法的视图中完成了这一切...在第一次点击时将

  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设置为false，在allowGrant上使用(change)而不是像之前一样使用secondCheck。

(click)

请参阅修改后的stackblitz

Stackblitz

 <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>