Question

我有一个简单的形式，其运作逻辑：

选择方框1（是/否）

选择方框2（如果是则显示）选择方框3（如果没有则显示）

只有显示的选择框应设置为必需，另一个不是必需的。

<mat-select placeholder='Show First Options' formControlName='b' [(ngModel)]="view">
    <mat-option [value]="'first'">
       First
    </mat-option>
    <mat-option  [value]="'second'">
      Second
    </mat-option>
  </mat-select>
</mat-form-field> 

<mat-form-field *ngIf="view === 'first'">
  <mat-select       
      placeholder='First Items' 
      formControlName='one'
      [required]="view === 'first'">
    <mat-option *ngFor="let item of items1" [value]="item">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field *ngIf="view === 'second'">
  <mat-select
      placeholder='Second Items'
      formControlName='two'
      [required]="view === 'second'"> 
    <mat-option *ngFor="let item of items2" [value]="item">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

这适用于第一个默认选择框。但是，当您切换到第二个框时，第一个框似乎保留其所需的验证器。

我写了一个演示来演示这个： https://stackblitz.com/edit/angular-9eoffq

如何确保只需要查看的选择框？

Answer 1

编辑演示的道歉，因为人们正在审查它，这引起了混乱，但我似乎已经解决了 - 问题似乎源于DOM重新渲染删除mat-form-field之前删除{{ 1}}标签。这意味着表单仍具有必需属性。

演示已经使用解决方案进行了更新 - 我必须以编程方式删除所需的验证器并将其添加到相应的表单控件中。然后我必须更新值和有效性以在验证器更改后清除错误。

required

Answer 2

您可以改为充分利用您的反应形式，而不是使用ngModel，而是使用表单控件。此外，通过禁用和启用字段，它们可以包含在表单对象中，也可以从表单对象中排除，因此也不会应用验证。

你可以听valueChanges表格，但我喜欢避免它，因为如果你有一个大表格，它会被过度激发。但是，如果您只想听取特定的控件更改，您也可以这样做。我喜欢这里简单的change事件：

<mat-select formControlName='b' (change)="onChange()">

然后隐藏/显示另一个选择：

<mat-form-field *ngIf="form.controls.b.value === 'first'">
<!-- -->
<mat-form-field *ngIf="form.controls.b.value === 'second'">

和更改事件：

onChange() {
  if(this.form.get('b').value === 'first') {
    this.form.get('one').enable()
    this.form.get('two').disable()
  } else {
    this.form.get('one').disable()
    this.form.get('two').enable()     
  }
}

<强> DEMO

有了这个，我们需要记住，禁用的控件是从表单对象中排除的，如果你想要所有的值（包括禁用），你需要调用this.form.getRawValue()

根据条件将两个角度材质中的一个选择为必需

2 个答案: