在 Angular 中显式验证模板驱动表单

Question

我有一个模板驱动的表单，如果数据可用，它会填充控件。但是在填充控件后，验证时不会应用错误样式（使用 Angular material 元素）。仅当我触摸元素或提交表单时才应用错误样式。如何手动触发表单验证？
你可以查看 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();
    }
}

在 Angular 中显式验证模板驱动表单

Explicitly validate Template Driven forms in Angular

angular

angular-forms