角4检查多个复选框

问题描述：

我与显示多个复选框用户角色的一种形式：角4检查多个复选框

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

角色对象从服务器加载看起来像这里面有所有的形式显示的角色：

{id: 1, name: "HQ", description: "A Employee User", created_at: "2017-10-07 10:43:17",…} 
1 
: 
{id: 2, name: "admin", description: "A Manager User", created_at: "2017-10-07 10:43:17",…} 
2 
: 
{id: 3, name: "caretaker", description: "", created_at: null, updated_at: null}

现在我想使用form.setValue设置多个复选框，从服务器加载我的用户对象如下所示：用户对象中的“角色”是分配给用户并需要检查的角色形式

{ 
"id":13, 
"name":"Wasif Khalil", 
"email":"[email protected]", 
"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 
        });

有人可以帮我检查复选框与加载的用户角色对象。在此先感谢

编辑：对不起，不解释得很好，我已经编辑我的问题，再次说明了一个问题：用户对象的角色分配给用户的角色和作用对象是所有的角色列表形式显示，看看下面的图片：

我不认识的语法，是ngModel不应该是ngModel = “yourvalue”？ – Sam

为什么不只是覆盖值而不是使用setValue？ – LiverpoolOwen

是啊，ngModel =“YourArrayVariable”在你的案例中 –

答

您不必使用活性形式，使之完成。

HTML

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

打字稿：

check(value1, value2){ 
    return (value1.filter(item => item.id == value2)).length 
}

DEMO

非常感谢（Y）它的工作原理，我只需做出一个改变，你定义的“用户”对象是一个sinle用户对象，所以我不需要在视图中添加另一个ngfor，我只是将“用户”重命名为“用户“并删除用户ngfor –

一个问题，我不能添加验证，如果我不添加ngModel，当我添加验证它检查所有复选框，任何解决方案？ –

很高兴工作！ :)更新应该通过添加一个新行添加缺失的角色给用户，取消选中应该删除它，我猜？有没有尊重角色的顺序？ – Vega

角4检查多个复选框

相关推荐