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

摆脱[checked]="IsChecked"内的mat-checkboxes并将[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>

Mat-checkbox未被formControl选中

2 个答案: