Angular2 - ngForおよび反応形式のボックスをチェックする

Question

データベースから返されるオブジェクトは、IDの名前のリストであり、それらが選択されているかどうかです。

オブジェクト：

let data = [{ 
    AttributeID: 1, 
    AttributeName: 'Something', 
    IsSelected: 'True' 
}, 
{ 
    AttributeID: 2, 
    AttributeName: 'Something Else', 
    IsSelected: 'False' 
}] 

HTML：

<div *ngFor="let data of modalData.variableData"> 
    <input type="checkbox" (change)="onAttributeCheckboxChange(data.AttributeID, $event.target.checked)" [checked]="(data.IsSelected == 'True' ? 1 : 0)"> {{data.AttributeName}}<br> 
</div> 

コンポーネント：

private settingsForm: FormGroup; 

ngOnInit() { 
    this.settingsForm = this.fb.group({ 
     attribute: this.fb.array([]) 
    }); 
} 


onAttributeCheckboxChange(attribute: number, isChecked: boolean) { 
    const attributeFormArray = <FormArray>this.settingsForm.controls.attribute; 

    if (isChecked) { 
     attributeFormArray.push(new FormControl(attribute)); 
    } else { 
     let index = attributeFormArray.controls.findIndex(x => x.value == attribute) 
     attributeFormArray.removeAt(index); 
    } 
} 

は、私が間違ってここで何かをやっているbecaus特定のボックスは私のUIにcheckedと表示されていますが、フォームを送信すると、配列は空に戻ってきます。

onSave() { 
    console.log(this.settingsForm.value) 
} 

どのように私はformが最初[checked]経由だけ要素自体を確認していないされているチェックボックスの知っていることを確認することができますか？

Answer 1

あなたはOnInit上のデータのチェックを行うと同じ方法をonChangeで行われるフォームの配列にチェックしたものをプッシュすることができます。

export class App { 
    emails = [{email:"email1", isSelected: 'true'},{email:"email2", isSelected: 'false'},{email:"email3", isSelected: 'true'},{email:'email4', isSelected: 'false'}] 
    myForm: FormGroup; 

    constructor(private fb: FormBuilder) { 
     this.myForm = this.fb.group({ 
     useremail: this.fb.array([]) 
     }); 
    } 

    ngOnInit() { 
     for(let item of this.emails){ 
     if (item.isSelected === 'true'){ 
      this.myForm.controls.useremail.push(new FormControl(item.email)); 
     } 
     } 
    } 

    onChange(email:string, isChecked: boolean) { 
     const emailFormArray = <FormArray>this.myForm.controls.useremail; 

     if(isChecked) { 
     emailFormArray.push(new FormControl(email)); 
     } else { 
     let index = emailFormArray.controls.findIndex(x => x.value == email) 
     emailFormArray.removeAt(index); 
     } 
    } 

    submitForm(event){ 
    console.log(this.myForm.value); 
    } 

} 

あなたはhere