角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 
        });

有人可以幫我檢查複選框與加載的用戶角色對象。在此先感謝

編輯：對不起，不解釋得很好，我已經編輯我的問題，再次說明了一個問題：用戶對象的角色分配給用戶的角色和作用對象是所有的角色列表形式顯示，看看下面的圖片：

來源

2017-10-09 Wasif Khalil

我不認識的語法，是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

來源

2017-10-09 14:12:17 Vega

非常感謝（Y）它的工作原理，我只需做出一個改變，你定義的「用戶」對象是一個sinle用戶對象，所以我不需要在視圖中添加另一個ngfor，我只是將「用戶」重命名爲「用戶「並刪除用戶ngfor –

一個問題，我不能添加驗證，如果我不添加ngModel，當我添加驗證它檢查所有複選框，任何解決方案？ –

很高興工作！ :)更新應該通過添加一個新行添加缺失的角色給用戶，取消選中應該刪除它，我猜？有沒有尊重角色的順序？ – Vega

角4檢查多個複選框

回答

相關問題