Angular中Validators.required导致表单字段出现异常函数消息的原因

问题根源 #

你创建UntypedFormControl时参数顺序搞错了：UntypedFormControl构造函数的第一个参数是控件的初始值，第二个参数才是校验规则（单个校验器或校验器数组）。你直接把Validators.required传给了第一个参数，导致控件的初始值变成了这个校验函数，当表单校验触发时，错误提示逻辑意外输出了函数的字符串形式，也就是你看到的那段奇怪内容。

修复后的TS代码 #

把校验器移到构造函数的第二个参数位置，初始值可以设为空字符串或null：

super.ngOnInit();
// 正确传递参数：初始值 + 校验器
this.justificationControl = new UntypedFormControl('', Validators.required);
this.form = new UntypedFormGroup({
    justificationControl: this.justificationControl
});
this.markForCheck();
this.ready = true;

额外提示 #

• 如果需要同时设置多个校验器，要把它们放进数组里，比如：

  new UntypedFormControl('', [Validators.required, Validators.minLength(3)])
  

• 你的form-textarea作为原生textarea的透传组件，应该是错误提示逻辑读取了控件的异常值（也就是那个校验函数）才会显示这段内容，修正参数后就能正常展示必填项的默认提示了。

内容的提问来源于stack exchange，提问作者pemko