页面加载时未禁用角度材质选择

Question

我正在尝试在 Angular 18 和 Angular Material 18 中显示父级和子级选择列表。

我希望初始父级选择“显示全部”，然后禁用子级选择列表。如果父值发生更改 - 子选择列表应启用。似乎在子项上使用 [disabled] 输入时 - 它不会在加载时触发，但如果在进行更改后随后选择“显示全部”，则它会起作用。

任何想法 - 我做了这个 stackblitz 来显示问题。

https://stackblitz.com/edit/4wkc6t

Answer 1

属性

disabled

在反应形式中不受尊重。 SO 和 Github issues 中的其他地方也报告了同样的情况。 这里和这里。

相反，请在代码中执行此操作，您肯定可以弄清楚：

<form [formGroup]="testForm">
  <h4>Basic mat-select</h4>
  <mat-form-field>
    <mat-label>Favorite food</mat-label>
    <mat-select formControlName="selectedItem" (selectionChange)="foodSelectionChange($event)">
      <mat-option value="Show all">Show all</mat-option>
      @for (food of foods; track food) {
      <mat-option [value]="food">{{food}}</mat-option>
      }
    </mat-select>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Sub type</mat-label>
    <mat-select
      formControlName="subFood"
      [disabled]="testForm.controls['selectedItem'].value === 'Show all'"
    >
    </mat-select>
  </mat-form-field>
</form>

在课堂上：

export class SelectOverviewExample {
  private fb = inject(FormBuilder);

  testForm = this.fb.group({
    selectedItem: [''],
    subFood: [''],
  });

  foods: string[] = ['Vegetables', 'Meat', 'Poultry', 'Fish'];

  constructor() {
    this.testForm.controls['selectedItem'].setValue('Show all');
    this.configureSubFoodsSelect();
  }

  private configureSubFoodsSelect() {
    if (this.testForm.controls['selectedItem'].value === 'Show all') {
      this.testForm.controls['subFood'].disable();
    } else {
      this.testForm.controls['subFood'].enable();
    }
  }

  foodSelectionChange(event: MatSelectChange) {
    this.configureSubFoodsSelect();
  }
}