フォームグループAngular2を使用してチェックボックスの値を画面に表示する方法

Question

私はangular2初心者です。チェックボックスをオンにし、チェックボックスをオフにして値を削除すると、画面にチェックボックスの値を表示しようとしています。私はformGroupとを使用しています。angular2のformArrayです。

Htmlのここコード： -

<form [formGroup] = "testForm"> 

    <div formArrayName="extras"> 
    <span *ngFor="let extra of extras; let i = index" formGroupName="{{i}}"> 
     <label class="btn btn-primary" formControlName="{{extra.value}}" btnCheckbox [(ngModel)] = "extra.status">{{extra.display}}</label> 
    </span> 
    </div> 
</form> 
<!-- Display values of extras --> 
<div *ngIf="getFormValues?.extras"> 
    <span *ngFor="let extra of getFormValues?.extras; let i = index> 
    {{extra.value}} 
    </span> 
</div> 

ここComponent.tsコード

extras:any = [ 
    { value: 'good', display: 'good', status: 'false'}, 
    { value: 'bed', display: 'bed', status: 'false'}, 
    { value: 'nice', display: 'bed', status: 'false'}, 
] 

let allextras: FormArray = new FormArray([]); 
for (let i = 0; i < this.extras.length; i++) { 
    let fg = new FormGroup({}); 
    fg.addControl(this.extras[i].value, new FormControl(false)) 
    allextras.push(fg) 
} 

this.testForm.valueChanges.subscribe((form: any) => { 
    this.getFormValues = form; 
}); 

このコードはうまく動作しているが、チェックボックスとビザを確認した場合、チェックボックスの値を表示しません。その逆。 ありがとう！

Answer 1

質問は非常に明確ではありません、あなたはcomponent.ts

のために、特に全体のコードを投稿していないが、コードのためには、この部分はあなたの問題を引き起こしている

for (let i = 0; i < this.extras.length; i++) { 
    let fg = new FormGroup({}); 
    fg.addControl(this.extras[i].value, new FormControl(false)) 
    allextras.push(fg) 
} 

ようです。 formArrayをformGroupに割り当てることは決してありません。

私はこれが役立つと思います。

this.testForm = new FormGroup({}); 
    this.testForm.addControl(this.extras[i].value, new FormControl(false)); 

しかし、いくつかのことはまだ明確ではなく、問題を引き起こす可能性があります。これが役立たない場合は、コード全体を投稿してください。