angular12表单错误提示不显示边框

Posted 2023-04-13

参考技术A 在angular12中，如果表单错误提示不显示边框，可以在表单标签中添加errorCssClass属性，并且设置相应的错误提示的CSS样式，以实现表单错误提示框显示边框的效果。

表单提交后Angular 2显示验证错误

【中文标题】表单提交后Angular 2显示验证错误

【英文标题】：Angular 2 display validation errors after form submit

【发布时间】：2016-03-10 11:26:09

【问题描述】：

我正在构建一个模型驱动的 Angular2 表单。我发现的大多数示例都会禁用提交按钮，直到表单有效。但是，我不喜欢这种模式，我宁愿在提交表单后向用户显示任何潜在的错误。

我在提交前后比较了我的表单 ControlGroup 数据，看不出有任何区别。

有没有办法确定表单是否已提交，以便显示我的内联验证错误？

【参考方案1】：

目前没有办法。您可以自己在提交处理程序中设置一个标志。

虽然正在进行中

见 - https://github.com/angular/angular/issues/2960 - https://github.com/angular/angular/pull/7449

【讨论】：

耻辱。很高兴看到它来了！

【参考方案2】：

我不认为公认的答案 - 以及对 Angular 的相关更新真正回答了这个问题。

你可以使用form.submitted吗？标记以查明用户是否已经尝试提交 - 但这不会自动显示错误（例如，如果您有必填字段并且用户没有在您的表单上输入任何内容而只是单击提交，那么您会期望所有必填项字段以显示所需的错误通知）。

这可以按如下方式完成：

  onSubmit() 
    if (this.form.valid) 
      console.log('form submitted');
     else 
      this.validateAllFormFields(this.form);
    ;
  

  validateAllFormFields(formGroup: FormGroup)  
    Object.keys(formGroup.controls).forEach(field => 
      const control = formGroup.get(field);            
      if (control instanceof FormControl)             
        control.markAsTouched( onlySelf: true );
       else if (control instanceof FormGroup)        
        this.validateAllFormFields(control);           
      
    );
  

信用和完整的解释here。