Javascript 选中多个复选框

Javascript 选中多个复选框,javascript,angular,typescript,checkbox,Javascript,Angular,Typescript,Checkbox,我有一个表单,其中用户角色显示为多个复选框: <div *ngFor="let role of roles"> <label for="role_{{role.id}}"> <input type="checkbox" ngModel name="roles" id="role_{{role.id}}" value="{{role.id}}"> {{role.name}} &nbsp;&nbs

我有一个表单,其中用户角色显示为多个复选框:

<div *ngFor="let role of roles">
            <label for="role_{{role.id}}">
              <input type="checkbox" ngModel name="roles" id="role_{{role.id}}" value="{{role.id}}"> {{role.name}} &nbsp;&nbsp;
            </label>
          </div>
现在我想使用form.setValue设置多个复选框,从服务器加载的用户对象如下所示: 用户对象中的“角色”是分配给用户并需要在表单上检查的角色

{
"id":13,
"name":"Wasif Khalil",
"email":"wk@wasiff.com",
"created_at":"2017-10-07 10:43:17",
"updated_at":"2017-10-09 07:45:34",
"api_token":"LKVCGPGnXZ3LyiCnyiTAg8XTpck6xWlVkeoMBgtoYZWoAOy4b5epNqMz7KG7",
"roles":[
     {"id":2,"name":"admin","description":"A Manager User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"2","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17"}
     },
     {"id":1,"name":"HQ","description":"A Employee User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"1","created_at":null,"updated_at":null}
     }
   ]
}
加载用户对象表单服务器im设置值后,如下所示:

this.form.setValue({
                        name: user.name,
                        email: user.email,
                        password:"",
                        confirm_password:"",
                        roles: [1] //here im not sure how to set roles
                    });
有人能帮我选中已加载用户角色对象的复选框吗。 提前谢谢

编辑: 很抱歉没有解释清楚,我已经编辑了我的问题以再次解释该问题: 用户对象上的角色是分配给用户的角色 角色对象是要在表单中显示的所有角色的列表,请参见下图:


您不必使用反应式表单来完成

HTML

  <input ...[checked]="check(user.roles,role.id)" ...>

我不认识语法,ngModel不应该是ngModel=“yourvalue”吗?为什么不直接覆盖该值而不是使用setValue?是的,ngModel=“YourArrayVariable”在您的情况下实际上[(ngModel)]=“YourArrayVariable”我建议您在想要做的事情时使用被动形式。你会想使用patchValue,而不是setValue,因为setValue是在你想更改所有值时使用的,而不仅仅是子集。非常感谢(Y)它成功了,我只需要做一个更改,你定义的“用户”对象是单用户对象,所以我不需要在视图上添加另一个ngfor,我只是将“用户”重命名为“用户”并且删除了用户NgFor一个问题,如果我不添加ngModel,我就不能添加验证,当我添加验证时,它会选中所有复选框,有解决方案吗?很高兴它成功了!:)更新应该通过添加新行向用户添加缺少的角色,取消选中应该会删除它,我猜?有需要尊重的角色顺序吗?
  <input ...[checked]="check(user.roles,role.id)" ...>
check(value1, value2){
  return (value1.filter(item => item.id == value2)).length
}