Angular 5 reactive form은 체크 할 mat-checkbox를 설정합니다.

Question

Angular 5.1.2 및 Angular Material 5.0.2에 반응성이있는 mat-checkbox를 사용하려고합니다.

patchValue ({아마추어 : [거짓])를 사용할 때를 제외하고 모든 것이 잘 작동합니다. 이상한 것은 내가 같은 일을하고있는 곳에 다른 양식이 있고 잘 작동한다는 것입니다. 아마추어 체크 박스 일뿐 만 아니라 모든 체크 박스가 체크됩니다. 단지 "아마추어"를 예로 사용합니다.

formControl amateur.value는 항상 false입니다. 그러나 일단 패치 된 값이 실행되면 제어가 점검됩니다.

무엇이 누락 되었습니까?

HTML5

<form [formGroup]="showClassGrp"> 
    <mat-checkbox id="amateur" class="amateur" color="primary" 
     formControlName="amateur">Amateur</mat-checkbox> 
</form> 

타이프 라이터 작동 및 디스플레이가 올 FormBuilder

.

this.showClassGrp = this.fb.group({ 

    ... 
    amateur: [false], 
    ... 
}); 

patch showClassGrp 및 모든 checkbox는 formControl 값이 false 인 경우에도 확인됩니다.

this.showClassGrp.patchValue({ 
     className: [this.showClass.className], //this works 
     amateur: [false], // this changed the display to checked. 
     ... 
}); 

Answer 1

reactive 반응식을 사용하는 경우 양식의 각 구성원에게 FormControl을 할당 할 수 있습니다. 이런 식으로 뭔가

component.ts

showClassGrp: FormGroup; 

    constructor() { } 

    ngOnInit() { 


    this.showClassGrp = new FormGroup({ 
     'amateur': new FormControl(false), 
    }); 

    } 

    onSubmit(){ 
    console.log(this.showClassGrp.value.amateur); 
    this.showClassGrp.patchValue({amateur: false}); 
    console.log(this.showClassGrp.value.amateur); 
    } 

component.html

<form [formGroup]="showClassGrp" (ngSubmit)="onSubmit()"> 
    <mat-checkbox id="amateur" class="amateur" color="primary" 
       formControlName="amateur">Amateur</mat-checkbox> 
    <button class="btn btn-primary" type="submit"> Submit </button> 
</form>