formGroup Angular2를 사용하여 화면에 체크 상자 값을 표시하는 방법

Question

나는 angular2 초보자입니다. 확인란을 선택하고 확인란을 선택하지 않으면 화면에 확인란 값을 표시하려고 시도하므로 값을 제거하십시오. 나는 angular2에 formGroup과 formArray을 사용하고 있습니다. 여기

HTML을 코드 : - 여기

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

이 코드는 잘 작동하지만 체크 박스 및 비자 체크 체크 상자의 값을 표시하지 않습니다

<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 코드 그 반대. 감사합니다.

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

그러나 일부 항목은 여전히 ​​명확하지 않으며 문제를 일으킬 수 있습니다. 이것이 도움이되지 않으면 전체 코드를 게시하십시오.