正文

表单提交时的角度表单错误组件触发验证

 2023-03-13  198

关键词：

【中文标题】表单提交时的角度表单错误组件触发验证【英文标题】：Angular form error component trigger validation on form submit 【发布时间】：2020-02-12 18:22:54 【问题描述】：

我正在使用Angular 8。

我有以下反应形式组。

this.form = this.fb.group(
  query: ['', [
    Validators.required
  ]]
);

在 HTML 中

<form [formGroup]="form" (submit)="onSubmit">
    <textarea formControlName="query" placeholder="SELECT ..."></textarea>
    <form-errors [control]="f.query"></form-errors>

    <button type="submit">Submit</button>
</form>

form-errors 是一个自定义模板，它显示错误消息，该模板具有以下方法来触发控件的验证检查。

shouldShowErrors(): boolean 
    return this.control && 
           this.control.errors && 
           (this.control.dirty || this.control.touched);

因此，当控件被触摸或更改时会触发验证。

如何在提交表单时触发验证检查？如何通过传递的控件访问form-errors组件内的form？

【问题讨论】：

【参考方案1】：

您可以在提交按钮上点击mark all controls as touched，为该按钮创建一个方法并调用它

 public markFormGroupTouched(formGroup: FormGroup) 
    Object.values(formGroup.controls).forEach(control => 
      control.markAsTouched();

      if (control.controls) 
          control.controls.forEach(c => this.markFormGroupTouched(c));
      
    );
  
  this.markFormGroupTouched(this.form);

demo

【讨论】：

是control.controls 用于嵌套表单组吗？因为它给出了错误AbstractControl has no attribute controls。我通过使formGroup.markAllAsTouched() 触及所有formGroup 及其工作来解决它。

角度模糊验证阻止提交单独的表单

】角度模糊验证阻止提交单独的表单【英文标题】：Angularblurvalidationpreventingsubmissionofseparateform【发布时间】：2015-11-1220:50:13【问题描述】：我有一个Angular页面，其中包含一个用于添加人员的表单，以及一个用于提交人员列表的... 查看详情

Stripe Elements，表单提交时的输入验证

】StripeElements，表单提交时的输入验证【英文标题】：StripeElements,inputvalidationuponformsubmit【发布时间】：2022-01-0611:17:32【问题描述】：我有一个使用以下反应条纹元素的支付流程。我正在使用onChange道具在用户键入时显示实时错误... 查看详情

来自外部组件的角度触发功能

...1-07-2523:18:30【问题描述】：我有一个组件，它只包含一个表单和一个提交表单的函数。submitData(newUserForm:NgForm)当我点击一个按钮时，如何从另一个组件触发这个功能？我像这样嵌入表单组件：<app-form></app-form> 查看详情

即使在表单活动验证状态下，如何仅在提交时验证角度表单

】即使在表单活动验证状态下，如何仅在提交时验证角度表单【英文标题】：Howtovalidateangularformonlyonsubmitevenatformactivevalidationstate【发布时间】：2017-05-1915:44:14【问题描述】：我有一个表单，我必须仅在提交表单时进行验证，我... 查看详情

关于antd如何在表单外点击触发表单验证的问题

参考技术A需求：由于业务需要，表单过大的问题，我把表单和提交按钮分开成了两个组件，如图：解决思路：1.点击按钮时告知父级这一行为：按钮组件传送门：https://www.kancloud.cn/ppyy321/react/2735962.父级接收子组件传递的信息子... 查看详情

无法使用 Jest 中的提交按钮触发 Vuetify 表单提交

】无法使用Jest中的提交按钮触发Vuetify表单提交【英文标题】：FailtotriggerVuetifyformsubmitusingsubmitbuttoninJest【发布时间】：2020-06-2608:11:36【问题描述】：我正在尝试使用Jest和Avoriaz验证基于Vuetify组件的Vue表单的行为。我可以在表单... 查看详情

Angular 2 提交时触发表单验证

】Angular2提交时触发表单验证【英文标题】：Angular2TriggerFormValidationonSubmit【发布时间】：2017-03-0601:27:11【问题描述】：我用angular2创建了一个表单并添加了一些自定义验证器。现在我想在用户点击提交按钮时触发表单验证。在到... 查看详情

在提交 Angular4 时触发表单验证

】在提交Angular4时触发表单验证【英文标题】：TriggerformvalidationonSubmitAngular4【发布时间】：2018-01-0921:43:40【问题描述】：我使用Angular和ionic设计了一个模板驱动的表单，它具有一些自定义（onblur）验证。现在我喜欢在点击提交按... 查看详情

同一按钮单击时的表单验证和 Ajax 调用

】同一按钮单击时的表单验证和Ajax调用【英文标题】：FormValidation&AjaxCallonSameButtonClick【发布时间】：2018-07-1713:55:32【问题描述】：我有一个提交表单的按钮，我想先触发jqueryValidation并检查表单是否有效。我尝试在下面执行... 查看详情

Django：jQuery触发表单提交onchange of checkbox并保留重新加载时的值

】Django：jQuery触发表单提交onchangeofcheckbox并保留重新加载时的值【英文标题】：Django:jQuerytotriggeraformsubmitonchangeofcheckboxandretainthevaluesonthereload【发布时间】：2021-03-1700:48:12【问题描述】：当hostform中的一个或多个复选框被选中时... 查看详情

触发动作表单提交javascript的html

我想，以验证在表单中的字段，当用户点击提交按钮，如果有在现场确认没有错误拉了一个不同的HTML文件。然而，验证似乎并不管用。我想要的事件名称和位置字段字母数字字符和空格，但它似乎采取其它值。把的onClick=“self.l... 查看详情

不提交表单的 MVC 表单验证

】不提交表单的MVC表单验证【英文标题】：MVCformvalidationwithoutformsubmission【发布时间】：2013-05-0609:05:15【问题描述】：我有一个标准表单，由具有标准[必需]验证的MVC模型填充。我想通过AJAX“提交”此表单数据，而不是通过提交... 查看详情

角度测试以反应形式提交事件

...有一个具有基本形式（反应形式）的组件。我尝试在这个表单上测试提交事件，看看它是否正确调用了必要的方法。我的问题我无法触发表单的提交事件文件组件.html<formclass="form-horizontal"id="staticForm"[f 查看详情

以角度验证电子邮件模式

...如果用户输入无效的电子邮件格式，我试图阻止用户提交表单，我的问题是他可以输入文本并成功提交表单，即使它出现错误消息但仍然提交表单，我是不使用formGroup我的html代码：<divclass="form-group"><labelfor="fromEmail 查看详情

提交时的表单验证 - angularjs 1.5 - 当字段 $pristine 时 $invalid

】提交时的表单验证-angularjs1.5-当字段$pristine时$invalid【英文标题】：formvalidationonsubmit-angularjs1.5-$invalidwhenfield$pristine【发布时间】：2016-07-2118:34:11【问题描述】：我正在加载表单中的数据。我只想在表单有效的情况下允许用户提... 查看详情

表单组件应具有哪个输出类型的角度2？

假设我们有一个表格的“哑巴组件”。此表单接收一个模型对象，该模型对象将用于显示输入的初始值。用户完成表单并提交之后，关于输出的最佳实践是什么？我正在使用反应形式！1-我应该输出FormGroup对象吗？2-我应该使用Fo... 查看详情

Jquery 验证触发但不阻止表单提交

】Jquery验证触发但不阻止表单提交【英文标题】：Jqueryvalidationtriggersbutdoesn\'tpreventtheformsubmitting【发布时间】：2016-11-1307:40:40【问题描述】：我有一个带有Knockout的MVC项目。我正在尝试使用jQuery验证来验证我的注册视图。这是注... 查看详情

表单未验证角度 2 中 [ngClass] 的使用

】表单未验证角度2中[ngClass]的使用【英文标题】：Formnotvalidatingonusageof[ngClass]inangular2【发布时间】：2017-12-0922:49:09【问题描述】：我正在尝试对空字段进行验证，如下所示。但是表格没有验证。添加3行时，每行有2列，错误消息... 查看详情