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

【问题标题】：Angular 6 - Dynamically set [required] on mat-selectAngular 6 - 在 mat-select 上动态设置 [必需]
【发布时间】：2018-09-12 22:55:09
【问题描述】：

在我的 Angular v6 应用程序中，我试图显示一个下拉菜单，并根据一个布尔值将其设置为 required，该布尔值是在复选框的值上设置的。这是我模板中该代码的 sn-p（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 可以正确显示下拉列表，但问题与 mat-select 中的 [required]="includeModelVersion" 有关。

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

我在这里遗漏了什么，还是我定义不正确？

【问题讨论】：

你能分享 stackblitz 演示吗？
这是一个 stackblitz 演示，当我删除 *ngIf: stackblitz.com/edit/angular-86dmw6 ... 当我包含 *ngIf 时，我收到一个在我自己的开发环境中看不到的错误.不幸的是，我想根据复选框选择隐藏/显示下拉菜单，并且此功能目前在我的本地开发环境中为我工作。也许我应该显示/隐藏一个 div？

标签： html angular typescript angular-material

【解决方案1】：

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

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

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

【讨论】：

这将在最初选中复选框时起作用，但是当未选中复选框时如何删除验证器？我很难弄清楚。
绑定到复选框'changed'事件，如果复选框被选中，则使用上面的代码添加所需的验证器。如果未选中该复选框，则使用this.form.controls["modelVersionCtrl"].clearValidators()，然后不要忘记调用this.form.controls["modelVersionCtrl"].updateValueAndValidity()
谢谢，解决了！我添加了(change)="modelCheckboxChange($event)"，然后在我的.ts 文件中添加了一个新函数modelCheckboxChange(event) { if (event.checked) { this.firstFormGroup.controls["modelVersionCtrl"].setValidators(Validators.required); } else { this.firstFormGroup.controls["modelVersionCtrl"].clearValidators(); this.firstFormGroup.controls["modelVersionCtrl"].updateValueAndValidity(); } this.includeModelVersion = !this.includeModelVersion; }
但这并没有给你required mat-select 属性，它是呈现强制字段指示星号的东西
是的，它不会更新该标志。该标志使用输入上的“必需”html 属性显示。上面需要的标签只会改变 Angular Form 对象的状态。要显示星号，请获取对输入元素的引用并在 dom 中为其设置所需的属性。

【解决方案2】：

更新答案

您正在使用响应式表单，我认为您可以在这样的表单组内定义表单控件时定义Validators.required：

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

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

Angular Reactive Forms 的美妙之处在于以编程方式而不是在模板中设置验证。希望对您有所帮助！

【讨论】：

是的，请分享一个例子