单击按钮上的angular2验证表单 [英] angular2 validate form on button click
问题描述
如果我使用button type="submit"
提交表单,则会显示表单验证消息,并且一切都很好.但是,如果我有一个带有(click)="myhandler()"
的按钮(或链接),则不会显示验证.
If I submit a form using button type="submit"
the form validation messages appear and everything is fine. However if I have a button (or link) with (click)="myhandler()"
then the validations do not appear.
我该怎么办
- 将元素标记为需要运行验证程序,或
- 以编程方式运行并显示验证消息.
注意:这些是简单的验证,例如在输入字段上必填.
Note: These are simple validations like required on input fields.
示例代码:
<form (ngSubmit)="save()">
<input required type='text' [(ngModel)]="name">
<!-- Shows validation messages but still calls save() -->
<button (click)="save()">Click</button>
<!-- Only submits if valid and shows messages -->
<button type="submit">Submit</button>
</form>
<!-- does not even show validation messages, just calls save -->
<button (click)="save()">Click 2</button>
推荐答案
请注意:此方法适用于反应形式.
Please note: this approach is for reactive forms.
我使用markAsTouched()
属性在单击按钮时运行验证.
I used markAsTouched()
property to run validations on a button click.
假设以下按钮不在表格中:
Suppose the following button is outside the form:
<button type="button" (click)="validateForm()">Submit</button>
现在,在validateForm
方法中,如果表单无效,则可以为每个表单控件设置markAsTouched()
属性,并且angular将显示验证消息.
Now, in the validateForm
method if the form is invalid, you can set markAsTouched()
property for each of the form controls and angular will show validation messages.
validateForm() {
if (this.myformGroup.invalid) {
this.myformGroup.get('firstName').markAsTouched();
this.myformGroup.get('surname').markAsTouched();
return;
}
// do something else
}
前提是您在
<mat-error *ngIf="myformGroup.get('firstName').hasError('required')">
first name is required
</mat-error>
,并且您需要在表单组构建器中进行字段验证设置,例如
and you have required field validation setup in your form group builder like
firstName: ['', Validators.required]
这篇关于单击按钮上的angular2验证表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!