为什么我在DOM中使用 "required"，而在FormBuilder中却将字段设置为必填？

Question

在Angular Reactive Form文档指南中，当一个表单是由 FormBuilder 和设置为例。

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

为什么我们应该使用 required 属性的DOM了。

<input type="text" formControlName="firstName" required>

有没有办法从FormBuiler中读取表单属性并省去 required 属性从DOM中删除？

Answer 1

如果你查看文档，有一个关于这个的声明。

将这些HTML5验证属性与Angular的反应式表单提供的内置验证器结合使用。将这些结合起来使用，可以防止在模板被检查后更改表达式时出现错误。

这其实是建议建立一个万无一失的验证逻辑。另外，要记住，你要写的HTML会被编译成js即不是普通的HTML。

Answer 2

AFAIK，当你在模板中混合Reactive Forms和DOM属性时，你会得到一个警告。

有没有办法从FormBuiler中读取表单属性，并从DOM中省略所需属性？

我想有一个方法，你可以用一个叫做 盒装价值:

firstName: [{ value: '', disabled: true | false }, ...]

// Or

firstName: this.fb.control({ value: '', disabled: true | false }, ...)