Angular 6 - 在mat-select上动态设置[required]

Question

在我的Angular v6应用程序中，我试图显示一个下拉列表并根据布尔值将其设置为required，其中它设置在复选框的值上。这是我的模板中的代码片段（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构造函数中，我定义了我的布尔值：

includeModelVersion: boolean = false;

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

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

我在这里遗漏了什么，还是我错误地定义了什么？

Answer 1

如果您使用的是被动表单，则可以动态地将“required”验证器添加到formControl。

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

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

Answer 2

更新的答案

您正在使用反应式表单，我认为您可以在表单组中定义表单控件时定义Validators.required，如下所示：

this.fb.group({
  'modelVersionCtrl': ['', Validators.required]
})

如果您想根据某些条件撰写您的要求，请尝试Validators.compose([<your conditional logic here>])。

Angular Reactive Forms的优点是以编程方式而不是模板中设置验证。希望有所帮助！