在我的 Angular v6 应用程序中,我尝试显示一个下拉列表,并根据 bool 值将其设置为必需
,该 bool 值设置在复选框的值上。以下是我的模板中的代码片段(includeModelVersion
最初设置为 false
):
<mat-checkbox class='matCheckbox' (change)="includeModelVersion = !includeModelVersion">Run Model</mat-checkbox>
<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
,下拉列表仍然是必需的。
我在这里遗漏了一些东西,还是我定义了一些错误的东西?
最佳答案
如果您使用响应式(Reactive)表单,则可以动态地将“必需”验证器添加到 formControl。
this.form.controls["modelVersionCtrl"].setValidators(Validators.required);
您可以根据组件类中的某些条件执行此语句。
关于html - Angular 6 - 在垫选择上动态设置[必需],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52210256/