Angular 4：如何以反应形式将字符串数组分配到复选框中

Question

我正在尝试为我的用户角色显示复选框：

例如。我有两个用户角色：1.Admin 2.Employee

我在 userObject 中有一组角色：

user={
    "name":"Bhushan",
    "email":"bhushan@yaho.com",
    "roles":['Admin','Employee']
}

我想使用反应形式将这个模型填充到表单中。我想将角色数组填充到只读复选框中，即当表单加载时，用户可以编辑姓名和电子邮件，但admin如果用户具有管理员角色，复选框将显示为切换状态，如果用户不是管理员，则复选框将显示为切换状态。员工角色也是如此。

到目前为止，我尝试过以下操作：

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate>
  <div style="margin-bottom: 1em">
    <button type="submit" [disabled]="userForm.pristine" class="btn btn-success">Save</button> &nbsp;
    <button type="reset" (click)="revert()" [disabled]="userForm.pristine" class="btn btn-danger">Revert</button>
  </div>
  <div class="form-group">
    <label class="center-block">Name:
        <input class="form-control" formControlName="name">
    </label>
  </div>
  <div class="form-group">
    <label class="center-block">Email:
        <input class="form-control" formControlName="email">
    </label>
  </div>
  <div class="form-group" *ngFor="let role of roles;let i=index">
    <label>
        // I tried this, but it doesn't work
        <!--<input type="checkbox" [name]="role" [(ngModel)]="role">-->
       {{role}}
    </label>
  </div>
</form>

<p>userForm value: {{ userForm.value | json}}</p>`

任何输入？

Answer 1

也许做类似以下的事情。构建您的表单，并将角色粘贴在表单数组中：

this.userForm = this.fb.group({
  name: [this.user.name],
  roles: this.fb.array(this.user.roles || [])
});

// OPTIONAL: put the different controls in variables
this.nameCtrl = this.userForm.controls.name;
this.rolesCtrl = this.userForm.controls.roles.controls;

您在模板中迭代的角色数组可能如下所示：

roles = ['Admin', 'Employee','Some role 1', 'Some role 2']

并且在您的迭代中，只需比较并将roleinroles数组设置为已检查，以防它与表单数组中的值匹配。使用安全导航运算符，因为我们知道roles数组可能比表单数组更长，因此在尝试读取不存在的索引时不会抛出错误：

this.userForm = this.fb.group({
  name: [this.user.name],
  roles: this.fb.array(this.user.roles || [])
});

// OPTIONAL: put the different controls in variables
this.nameCtrl = this.userForm.controls.name;
this.rolesCtrl = this.userForm.controls.roles.controls;

演示