时间戳

首页 > 解决方案 > Angular 6 - 在 mat-select 上动态设置 [必需]

html - Angular 6 - 在 mat-select 上动态设置 [必需]

问题描述

在我的 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 正确显示，但问题与 inside相关[required]="includeModelVersion"。mat-select

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

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

标签： htmlangulartypescriptangular-material

解决方案

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

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

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

推荐阅读