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

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

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

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

Answer 2

更新后的答案

您正在使用反应式表单，我认为您可以在这样的表单组内定义表单控件时定义<div class="buttonclass" id="1div" onclick="setColor(1);" > <img id="1img" src="~/Images/Icons/image1.png"> </div>：

Validators.required

如果您要根据某些条件编写所需的内容，请尝试this.fb.group({ 'modelVersionCtrl': ['', Validators.required] })。

Angular Reactive Forms的优点在于，可以通过编程而不是在模板中设置验证。希望能有所帮助！

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

2 个答案: