角度5の反応性のフォームは、チェックするマットチェックボックスを設定しました

Question

角度5.1.2と角度のある材質5.0.2に反応フォームを使用してマットチェックボックスを使用しようとしています。

patchValue（{amateur：[false]）を使用した場合を除き、すべてがうまくいきます。変わったことは、私が同じことをやっているところに他の形があり、うまく働いていることです。それはただのアマチュアチェックボックスではなく、すべてのチェックボックスがチェックされています。ちょうど例として "アマチュア"を使用する。

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], 
    ... 
}); 

パッチshowClassGrpとすべてのチェックボックスは、彼らのためにformControl値がfalseであっても汝チェックされます。

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

Answer 1

reactからfromを使用している場合は、フォームの各メンバーに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>