正文 

当前位置： 首页 > 源码 >

在提交 Angular4 时触发表单验证

     2023-03-13     164

关键词：

【中文标题】在提交 Angular4 时触发表单验证【英文标题】：Trigger form validation on Submit Angular4 【发布时间】：2018-01-09 21:43:40 【问题描述】：

我使用 Angular 和 ionic 设计了一个模板驱动的表单，它具有一些自定义（onblur）验证。

现在我喜欢在点击提交按钮时触发表单验证。

如果表单无效，我不喜欢禁用提交按钮。

我试图标记控件并触摸或原始但它不起作用。

有人能帮帮我吗？如果单击提交按钮并且表单有错误，我喜欢显示错误消息。

   <form #form="ngForm" (ngSubmit)="register(form)" novalidate>
<ion-list>
    <ion-item>
        <ion-label floating>First Name</ion-label>
        <ion-input type="text" name="firstname" [(ngModel)]="model.firstname" #name="ngModel" required maxlength="100" (ionBlur)="validate(name)"></ion-input>
    </ion-item>
    <div class="error" *ngIf="errors.firstname">
        errors.firstname
    </div>
</ion-list>


register(form)
      for (var i in form.controls) 
        console.log(form.controls[i]);
        form.controls[i].markAsTouched();
        form.controls[i].markAsPristine();
        form.controls[i]._touched = true;

【问题讨论】：

【参考方案1】：

最简单的方法是有一个布尔标志，例如submitted，在您单击提交按钮后将其设置为true，然后在模板中将其添加到*ngIf，例如像这样：

<div *ngIf="submitted && name.errors?.required">
  Name is requried!
</div>

【讨论】：

【参考方案2】：

因此，对于模板驱动的表单，需要进行一些验证工作。我要说的第一件事是您可以在输入旁边添加标签或某种错误位，看起来像这样......

  <div class="error" *ngIf="form.controls.firstname?.errors | json">
        form.controls.firstname?.errors | json
  </div>

如果你有一个提交按钮，请像这样修改它......

<button type="submit" [disabled]="form.invalid">Submit</button>

【讨论】：

React Formik - 仅在表单提交时触发验证

】ReactFormik-仅在表单提交时触发验证【英文标题】：ReactFormik-Triggervalidationonlyonformsubmit【发布时间】：2019-11-0614:28:45【问题描述】：我在我的ReactNative应用程序中使用Formik。在登录表单上，我有两个字段：电子邮件和密码，它们... 查看详情

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

】表单提交时的角度表单错误组件触发验证【英文标题】：Angularformerrorcomponenttriggervalidationonformsubmit【发布时间】：2020-02-1218:22:54【问题描述】：我正在使用Angular8。我有以下反应形式组。this.form=this.fb.group(query:[\'\',[Validators.requ... 查看详情

1000hz Bootstrap 验证器在验证触发时未提交 - Laravel

】1000hzBootstrap验证器在验证触发时未提交-Laravel【英文标题】：1000hzBootstrapvalidatornotsubmitwhenvalidatetriggered-Laravel【发布时间】：2018-11-0414:19:54【问题描述】：在纠正所有验证错误后，引导验证器表单不提交，但如果没有触发验证... 查看详情

单击提交按钮时如何触发所有验证？

】单击提交按钮时如何触发所有验证？【英文标题】：HowdoItriggerallvalidationswhensubmitbuttonisclicked?【发布时间】：2016-12-1002:13:47【问题描述】：我已经为我的表单添加了验证，我希望它在单击提交按钮时触发每个验证。我尝试在谷... 查看详情

在 Angular4 中提交隐藏表单

】在Angular4中提交隐藏表单【英文标题】：SubmittingahiddenforminAngular4【发布时间】：2018-05-1515:27:06【问题描述】：为了克服提交常规HTTP请求时遇到的CORS（跨源请求共享）问题，我需要在Angular4中提交一个隐藏表单。我在HTML中做到... 查看详情

单击按钮时不会触发表单验证

...我有一个由两个按钮组成的表单。它们都没有类型中的“提交”声明。我的问题是表单验证是在两个按钮按钮单击期间触发的，因为我希望验证只发生在一个特定的按钮单击时。这可以实现吗？下面是我的代码。<formclass="form-h... 查看详情

在 Angular 4 响应式表单中提交时显示验证消息

】在Angular4响应式表单中提交时显示验证消息【英文标题】：ShowValidationMessageonsubmitinAngular4ReactiveForms【发布时间】：2017-11-3003:33:07【问题描述】：我正在使用Angular4，反应式表单。我想在用户单击提交/创建帐户按钮时显示验证错... 查看详情

在 Html 5 验证触发事件之前？ [复制]

...单处于视图模式并显示跨度，我将隐藏输入控件。有一个提交按钮。每当用户单击提交按钮并且表单处于查看模式时，我都会得到，Aninva 查看详情

在 Angular 单元测试中使用回车键提交表单

...：2018-02-2714:32:19【问题描述】：我正在为作为登录表单的Angular4组件编写测试。可以通过单击“提交”按钮或在任何输入字段中按Enter来提交表单。此行为由Angular表单指令规定。我可以编写一个测试用例来验证按钮单击是否提交... 查看详情

ASP.NET 使用 HTML 5 提交按钮防止表单验证

】ASP.NET使用HTML5提交按钮防止表单验证【英文标题】：ASP.NETPreventFormValidationwithHTML5SubmitButton【发布时间】：2018-09-2908:44:06【问题描述】：我正在尝试使用HTML5按钮元素来提交ASP.NET表单。我还希望它在单击时不触发验证。这将提... 查看详情

名称为提交的按钮停止触发表单的提交事件？ [复制]

】名称为提交的按钮停止触发表单的提交事件？[复制]【英文标题】：Buttonwithnamesubmitstoptriggeringform\'ssubmitevent?[duplicate]【发布时间】：2013-06-1816:45:09【问题描述】：我刚刚遇到了关于jQuery表单提交的问题。我试图在单击按钮时使... 查看详情

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

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

在提交时检查 jQuery 验证之前的表单提交

】在提交时检查jQuery验证之前的表单提交【英文标题】：FormsubmittingbeforejQueryvalidationischeckedonsubmit【发布时间】：2012-07-0822:33:43【问题描述】：我正在使用Ajax和jQuery来验证和提交表单中的信息。我遇到的问题是，当我单击提交按... 查看详情

不提交表单的 MVC 表单验证

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

触发动作表单提交javascript的html

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

在同一个按钮按下时触发 iframe 并提交表单

】在同一个按钮按下时触发iframe并提交表单【英文标题】：Fireiframeandsubmitformonthesamebuttonpress【发布时间】：2017-03-2204:23:35【问题描述】：在这个问题上花费了好几个小时，但找不到一个好的解决方案，所以这里是：我在iframe中... 查看详情

在不使用提交按钮的情况下触发标准 HTML5 验证（表单）？

】在不使用提交按钮的情况下触发标准HTML5验证（表单）？【英文标题】：TriggerstandardHTML5validation(form)withoutusingsubmitbutton?【发布时间】：2011-10-2313:16:21【问题描述】：谁知道如何在不使用提交按钮的情况下触发表单中的标准HTML5... 查看详情

如何从父组件 OnSubmit Angular 4 触发对子组件的验证？

】如何从父组件OnSubmitAngular4触发对子组件的验证？【英文标题】：howtotriggeravalidationofchildcomponentfromparentcomponentOnSubmitAngular4?【发布时间】：2018-04-2700:23:13【问题描述】：我有这样的表单，在父级中我包括多个子组件，每个子组... 查看详情