在Angular中明确验证模板驱动的表单

Question

我有一个模板驱动的表单，用于填充控件（如果有数据）。但是，在控件填充后，在验证时不会使用错误样式（使用Angular材质元素）。错误样式仅在我触摸元素或提交表单时适用。如何手动触发表单验证？
您可以检查stackblitz： https://stackblitz.com/github/vugar005/Angular-NT-Components/tree/template-driven-approach
预先感谢

Answer 1

如果页面加载期间输入控件上出现错误，则

显式触发 markAsTouched（）方法

getErrors(str) {
if (this.ntForm && this.ntForm.controls[str] ) {
  const control = this.ntForm.controls[str];
  const errors = control.errors; 
  if (!errors) { return; }      
  control.markAsTouched();
  // remaining code
}

Answer 2

根据确切的要求，您可能只想触发所有表单控件的验证，NgForm对象上有一个 markAllAsTouched（）方法可以做到这一点：

forceValidation(form: NgForm) {
    if (!form.valid) {
        form.control.markAllAsTouched();
    }
}