Validators.required 会引发错误，即使其中有一个值

Posted 2023-03-13

【中文标题】Validators.required 会引发错误，即使其中有一个值

【英文标题】：Validators.required throws an error, even though there is a value inside of it

【发布时间】：2019-04-15 03:19:49

【问题描述】：

我的问题是我有一个 MatInput 如下：

<input matInput [(ngModel)]="name" i18n-placeholder="@@Placeholder" placeholder="Your name" [formControl]="InputControl" value=" fieldName ">

在对应的组件中，我声明了fieldName: string;，并在ngOnInit() 方法中设置了值：

ngOnInit() 
        this.fieldName = "VALUE"; // obtained from server so it may differ
        if(this.fieldName.startsWith("PREFIX"))  // if value starts with a given prefix I want to remove it
            this.fieldName = this.fieldName.substr(3);
        

问题是它实际上运行良好（值会正确显示），但只要我想提交 MatDialog 表单，它就会告诉我不能提交空表单！那是因为我添加了一个“必需”验证器：

InputControl = new FormControl("", [Validators.required]);

所以输入字段中有一个值，但显然 Angular 没有注意到它？如果我为该值添加一个空格并在之后将其删除，则该值完全相同，但它不会引发任何错误。 有谁知道如何解决这一问题？真的很烦。

【问题讨论】：

您使用的是ngModel，但也在谈论FormControl。这是两个相互冲突的表单实现：ngModel 双向数据绑定不能与FormControl 一起使用，反之亦然。要么使用formControl 指令将@ 绑定到FormControl 对象，要么使用required 属性在不使用FormControl 的情况下使输入成为必需。另见：What are the practical differences between template-driven and reactive forms?

您正在混合ngModel 和 value 和 FormControl，您确定要设置 value 吗？也许您想设置输入name="fieldName" 的name，或者您想设置一个默认值？然后你应该更新this.name = this.fieldName..

【参考方案1】：

value 属性在 Angular 中毫无价值。

如果你想给你的控件一个值，通过控件本身来做：

<input matInput [(ngModel)]="name" i18n-placeholder="@@Placeholder" placeholder="Your name" [formControl]="InputControl">

ngOnInit() 
  this.fieldName = "VALUE"; // obtained from server so it may differ
  if(this.fieldName.startsWith("PREFIX"))  
    this.fieldName = this.fieldName.substr(3);
  
  // w/ form control
  this.InputControl.setValue(this.fieldName);
  // w/ template driven
  this.name = this.fieldName;

【讨论】：

（另外，请听 cmets 关于您的问题，不要同时使用 formControl 和 ngModel）

我已经尝试过了，但后来出现 ExpressionChangedAfterItHasBeenCheckedError 异常。

无论如何，谢谢，我已经修好了，只需要说 this.name（型号名称）而不是我的第一个想法。