Question

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

流程：

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

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

最后，我想得到这样的东西：

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

Answer 1

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

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

在输入一上创建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()中，如果选中了第一个框并选择console.log，则将值推到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和allowGrant设置为false，在(change)上使用secondCheck而不是{{1 }}就像我以前一样。

(click)

请参阅修订后的堆叠闪电战

Stackblitz

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

角反应形式处理两个级别/维的复选框

1 个答案: