正文

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

 2023-03-13  127

关键词：

【中文标题】在 Angular 4 响应式表单中提交时显示验证消息【英文标题】：Show Validation Message on submit in Angular 4 Reactive Forms 【发布时间】：2017-11-30 03:33:07 【问题描述】：

我正在使用 Angular 4，反应式表单。我想在用户单击提交/创建帐户按钮时显示验证错误消息。这是我正在使用的 HTML 和打字稿代码。

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">

  <div class="form-group">
    <input type="text" 
           id="firstname" 
           name="firstname" 
           formControlName="firstname" 
           placeholder="First Name">
    <span *ngIf="!signupForm.get('firstname').valid && signupForm.get('firstname').touched" 
           class="help-block"> Please Enter First Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <input type="text" 
           id="lastname" 
           name="lastname" 
           formControlName="lastname" 
           placeholder="Last Name">
    <span *ngIf="!signupForm.get('lastname').valid && signupForm.get('lastname').touched" 
           class="help-block"> Please Enter Last Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <button type="submit" 
            class="btn btn-success btn-lg btn-qte">Create Account</button>
  </div>

</form>

键入脚本代码

export class UserRegistrationComponent implements OnInit 
    signupForm: FormGroup;

    ngOnInit() 
        this.signupForm = new FormGroup(
            'firstname': new FormControl(null, [Validators.required, Validators.minLength(2)]),
            'lastname': new FormControl(null, [Validators.required, Validators.minLength(2),]),
            'businessname': new FormControl(null),
            'phonenumber': new FormControl(null, [Validators.required]),
            'email': new FormControl(null, [Validators.required, Validators.email]),
            'password': new FormControl(null, [Validators.required]),
            'confirmpassword': new FormControl(null, Validators.required)

        );
    

    onSubmit() 
        console.log(this.signupForm)

【问题讨论】：

【参考方案1】：

您可以使用 from markAllAsTouched() 方法执行此操作。它会将所有表单控件标记为已触摸，并在需要时触发验证错误

onSubmit() 
    this.signupForm.markAllAsTouched();

【讨论】：

【参考方案2】：

要通过formGroup获取表单控件的touched、dirty、valid等属性，请使用：

signupForm.controls.firstname.touched。同样的方式你可以得到其他属性，如有效和无效。

如果您创建了 FormControl 的单个对象，那么您可以在不使用 formGroup 的情况下以 firstname.touched 访问该对象属性。

有关模型驱动表单中验证的更多信息，请参阅Model Driven Form Validations 此处。

【讨论】：

【参考方案3】：

类似

onSubmit() 
    console.log(this.signupForm)
    this.signupForm.controls['firstname'].markAsTouched()

【讨论】：

淘汰赛验证插件 - 仅在表单提交时显示错误消息

】淘汰赛验证插件-仅在表单提交时显示错误消息【英文标题】：Knockoutvalidationplugin-showerrormessagesonlyonformsubmit【发布时间】：2014-08-0916:16:06【问题描述】：我正在使用淘汰赛绑定和淘汰赛验证插件(https://github.com/Knockout-Contrib/Knocko... 查看详情

在 laravel 集体中提交表单时显示加载器

...：我直接提交表单而不使用Ajax请求，我想在从后端获得响应时显示加载程序。怎么可能？!!Form::open([\'route\'=>[\'patient_signup\'],\'method\'=>\'post\ 查看详情

提交后在 Angular 的响应式表单上显示客户端错误和服务器错误

】提交后在Angular的响应式表单上显示客户端错误和服务器错误【英文标题】：DisplayClientErrorsandthenServerErrorsonAngular\'sReactiveFormaftersubmission【发布时间】：2021-10-0507:36:49【问题描述】：使用Angular12我有一个带有客户端和服务器验证... 查看详情

jQuery Validation，在提交时显示有效/无效的表单选项卡

】jQueryValidation，在提交时显示有效/无效的表单选项卡【英文标题】：jQueryValidation,displayingvalid/invalidformtab(s)onsubmit【发布时间】：2017-09-0516:56:18【问题描述】：我有一个带有选项卡的表单，以及一个简单的函数，用于在用户在表... 查看详情

Angular 11 自定义 ISBN 验证器响应式表单

】Angular11自定义ISBN验证器响应式表单【英文标题】：Angular11CustomISBNValidatorReactiveForms【发布时间】：2022-01-2322:09:59【问题描述】：我正在对ISBN号码进行自定义验证，我已经拥有检查号码并完美运行的功能，可以通过控制台为我... 查看详情

高级卡支付 SDK 在提交表单时显示错误

】高级卡支付SDK在提交表单时显示错误【英文标题】：AdvancedcardpaymentsSDKshowingerrorduringsubmissionofform【发布时间】：2020-09-2503:37:59【问题描述】：错误：“HostedFields付款已在进行中。”我从thisPayPaldocumentation复制了它，并在SDKURL中... 查看详情

如何在 Angular 7 页面加载时显示加载指示器，直到所有 api 响应？

】如何在Angular7页面加载时显示加载指示器，直到所有api响应？【英文标题】：howtoshowloadingindicatoronpageloadinginangular7untilallapisresponse?【发布时间】：2019-09-1614:26:43【问题描述】：我在一个页面中有5个api调用。一些api需要20秒才能... 查看详情

HTML 表单 POST 数据在提交时显示为空白

】HTML表单POST数据在提交时显示为空白【英文标题】：HTMLFormPOSTdatashowsasblankwhensubmitted【发布时间】：2014-07-0311:05:08【问题描述】：我有一个小表格，一旦提交，帖子数据就会设置为变量，然后在电子邮件中使用，当发送电子邮... 查看详情

javascript在处理响应式内容时显示视口大小的脚本(代码片段)

查看详情

在提交表单 Vue.js 时显示 flash 消息

】在提交表单Vue.js时显示flash消息【英文标题】：ShowflashmessageonSubmitformVue.js【发布时间】：2020-07-1613:51:39【问题描述】：我正在尝试创建一个联系表单，我已经完成了，但现在我正在尝试在提交时创建一个提交Flash消息。提交后... 查看详情

在 Angular 7 中处理大型响应式表单

】在Angular7中处理大型响应式表单【英文标题】：HandlingbigreactiveformsinAngular7【发布时间】：2019-12-2207:33:42【问题描述】：我正在尝试寻找一种更好的方法来处理复杂的角度形式。表格真的很大，我需要找到一种方法来降低复杂性... 查看详情

angular6响应式表单（登录实例）

一、表单验证1.　只有一个验证规则；this.myGroup=this.fb.group({email:[‘[email protected]‘,Validators.required],password:[‘‘]})2.有多个验证的时候；email:[‘[email protected]‘,Validators.compose([Validators.required,Val 查看详情

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

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

单击提交重力表单时显示加载动画

】单击提交重力表单时显示加载动画【英文标题】：Showaloadinganimationwhenclicksubmitgravityform【发布时间】：2012-09-2118:39:36【问题描述】：我正在使用重力表单将我的潜在客户提交给第三方，问题是当我点击提交时，需要5秒才能获得... 查看详情

如何使用响应式表单将验证器添加到表单控件以从角度材料进行匹配输入

...】：HowtoAddvalidatiorstoformcontrolwithreactiveformsformatchipinputfromangularmaterial【发布时间】：2019-08-3112:49:58【问题描述】：我正在从Angular5迁移到Angular7，我发现在同一元素中使用ngmodel和formcontrolName在Angula 查看详情

动态禁用控件时显示警告消息 angular2

】动态禁用控件时显示警告消息angular2【英文标题】：Warningmessagedisplayingwhiledisablingcontrolsdynamicallyangular2【发布时间】：2017-03-3115:36:44【问题描述】：我想禁用页面加载中的所有控件，并在用户单击反应式表单中的添加按钮时启... 查看详情

Angular - 模板驱动的表单 - 控制器中的自定义验证器功能

】Angular-模板驱动的表单-控制器中的自定义验证器功能【英文标题】：Angular-Templatedrivenforms-customvalidatorfunctioninthecontroller【发布时间】：2019-03-2306:30:29【问题描述】：由于在ngModel中使用响应式表单是deprecatedinAngular6，并且我的项... 查看详情

在组件中检索到响应后，加载微调器未隐藏

...0-09-1812:57:59【问题描述】：我有一个包含身份验证模块的Angular应用程序。我目前正在研究注册组件，并希望包含一个加载微调器，默认情况下它是隐藏的，然后在等待数据返回时显示。对于这个用例，我希望微调器在提交表单... 查看详情