如果我使用提交表单button type="submit"
出现表单验证消息,一切正常。但是,如果我有一个按钮(或链接)(click)="myhandler()"
那么验证不会出现。
我怎样才能:
- 将元素标记为需要验证器运行,或者
- 以编程方式运行并显示验证消息。
注意:这些是简单的验证,例如输入字段所需的验证。
示例代码:
<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>
请注意:此方法适用于反应式表单。
I used markAsTouched()
属性来在单击按钮时运行验证。
假设以下按钮位于表单之外:
<button type="button" (click)="validateForm()">Submit</button>
现在,在validateForm
方法如果表单无效,可以设置markAsTouched()
每个表单控件和角度的属性将显示验证消息。
validateForm() {
if (this.myformGroup.invalid) {
this.myformGroup.get('firstName').markAsTouched();
this.myformGroup.get('surname').markAsTouched();
return;
}
// do something else
}
前提是您在 html 中设置了验证消息,例如
<mat-error *ngIf="myformGroup.get('firstName').hasError('required')">
first name is required
</mat-error>
并且您在表单组构建器中需要进行字段验证设置,例如
firstName: ['', Validators.required]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)