Mat-checkbox未被formControl選中

Question

我正在嘗試使用formControlName將mat-checkbox標記為選中狀態，並且默認情況下將值設置為true。 但是未選中該復選框。 任何想法是什么導致此問題？

這是我的代碼。

<mat-checkbox formControlName="includeNpw"
        [checked]="IsChecked"
        class="checkbox"
        color="primary"
        fxFlex="0 0 auto">
</mat-checkbox>

和TS文件，我這樣做。

form: FormGroup;

constructor(
private fb: FormBuilder,
private filters: ApplicationListFilterService,
private confService: ConfigurationService,

 ) {}

 ngOnInit() {
  this.form = this.fb.group({
  followUp: [false, []],
  rememberFilters: [false, []],
  includeNpw: [true, []],
  includeInFlight: [true, []],
});

如您所見，最后兩個變量設置為true，但是什么也沒有發生。 我試圖使用[checked] ='true的某個變量'，但是它抱怨，因為我使用的是formcontrollerName

Answer 1

擺脫mat-checkboxes內的[checked]="IsChecked"並將[formGroup]="form"到mat-checkboxes的周圍html標簽中。

基本上應該看起來像這樣：

<div [formGroup]="form">
  <mat-checkbox formControlName="followUp"></mat-checkbox>
  <mat-checkbox formControlName="rememberFilters"></mat-checkbox>
  <mat-checkbox formControlName="includeNpw"></mat-checkbox>
  <mat-checkbox formControlName="includeInFlight"></mat-checkbox>
</div>

Answer 2

這是一個工作示例： https : //stackblitz.com/angular/arxloyadylp

我們有：

  myGroup = this.fb.group({
      followUp: [false, []],
      rememberFilters: [false, []],
      includeNpw: [true, []],
      includeInFlight: [true, []],
    });

和

<div [formGroup]="myGroup">
  <mat-checkbox class="example-margin" 
    [formControlName]="'includeNpw'">
  </mat-checkbox>
</div>