html - Angular 6 - 在垫选择上动态设置[必需]

Question

在我的 Angular v6 应用程序中，我尝试显示一个下拉列表，并根据 bool 值将其设置为必需，该 bool 值设置在复选框的值上。以下是我的模板中的代码片段(includeModelVersion 最初设置为 false):

<mat-checkbox class='matCheckbox' (change)="includeModelVersion = !includeModelVersion">Run Model</mat-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;
<mat-form-field *ngIf="includeModelVersion">
  <mat-select placeholder="Select Model Version" formControlName="modelVersionCtrl" [required]="includeModelVersion">
    <mat-option *ngFor="let model of modelData" [value]="model?.MODEL_VERSION">{{model.MODEL_VERSION}}</mat-option>
  </mat-select>
</mat-form-field>

在我的 .ts 构造函数中，我定义了 bool 值:

includeModelVersion: boolean = false;

使用 *ngIf，下拉菜单显示正常，但问题与 mat-select 中的 [required]="includeModelVersion" 有关。

如果我不选中该复选框，则表单可以正常提交，但如果我选中该复选框然后取消选中它，则即使includeModelVersion=false，下拉列表仍然是必需的。

我在这里遗漏了一些东西，还是我定义了一些错误的东西？

Answer 1

如果您使用响应式(Reactive)表单，则可以动态地将“必需”验证器添加到 formControl。

this.form.controls["modelVersionCtrl"].setValidators(Validators.required);

您可以根据组件类中的某些条件执行此语句。