Angular 7 中的动态验证： enable() 和 setValidators 取决于更改触发的标志

Posted 2023-03-13

【中文标题】Angular 7 中的动态验证： enable() 和 setValidators 取决于更改触发的标志

【英文标题】：Dynamic Validations in Angular 7: enable() & setValidators depending on flags triggered by changes

【发布时间】：2019-06-28 06:43:54

【问题描述】：

我的上一个 Angular 项目是很久以前的事了，同时我也在使用 VueJS。现在我回来了，并在 Angular 7 中实现了一个带有一些条件字段的响应式表单。

我下面的解决方案有效，我可以启用字段或设置验证器依赖于标志。但不知何故我不喜欢这个解决方案，它太长而且不直观。没有人能凭直觉知道，您必须禁用某个字段才能禁用验证器。 Angular/TypeScript 专家能否帮助我优化该代码或以正确的方式进行？

onChangeType(scope: string) 
    console.log(scope);
    this.myForm.get('riskType').disable();
    this.myForm.get('chancheType').disable();

    if (scope === 'local') 
    this.flags.isScopeLocal = true;
    this.flags.isScopeTemplate = false;
    this.flags.isScopeGlobal = false;
    this.myForm.get('chancheType').enable();
    this.myForm.get('chancheType').setValidators(Validators.required);
     else if (scope === 'template') 
    this.flags.isScopeTemplate = true;
    this.flags.isScopeLocal = false;
    this.flags.isScopeGlobal = false;
    this.myForm.get('riskType').enable();
    this.myForm.get('riskType').setValidators(Validators.required);
     else 
    // global
    this.flags.isScopeLocal = false;
    this.flags.isScopeTemplate = false;
    this.flags.isScopeGlobal = true;
    this.myForm.get('riskType').disable();
    this.myForm.get('chancheType').disable();
    
 

简短说明：如果范围是本地或模板，则会有一个新的必填字段。如果范围是全局的，则此字段消失，其验证器将被停用。

【问题讨论】：

如果控件未启用，则不检查验证（例如，禁用所有输入，表单有效）。对于禁用控件，您不能使用 [disabled]="..." 或 [attr.disabled]，但可以使用指令 ***.com/questions/47937639/…

谢谢@Eliseo，但这不是我的问题，..

【参考方案1】：

使用指令How to make a disabled reactive form Editable in Angular2补充我的评论

孤独的是，您无需使用 setValidators 更改验证器，并且该指令是启用/禁用控件的人。我认为更“可读”

<input formControlName="riskType" [enabledControl]="scope=='local'">
<input formControlName="chancheType" [enabledControl]="scope=='template'">

myForm=this.fb.group(
     riskType:['',Validators.required],
     cacheType:['',Validators.required],

)

【讨论】：

AngularMaterial 的大问题：Can't bind to 'enabledControl' since it isn't a known property of 'mat-select'.

Lonely，您需要在 main.ts 中导入指令，更多，请考虑该指令仅应用 NgControl（一个带有 [(ngModel)] 的输入或一个带有 FromControl 或 FormControlName 的输入） .见stackblitz.com/edit/…。真的，如果你使用材料，你可以直接使用属性[禁用]