angular - Angular 6 + Angular Material - 提交时的表单验证
问题描述
我有一些设置了不同验证规则的输入字段。但我也想在提交时一次向所有字段添加一些验证,或者禁用提交按钮,如果上面有任何错误。
但是,我并没有从一开始就将所有输入都放在表单标签中,现在我遇到了一些麻烦。我对这一切都很陌生,所以你能帮帮我吗?有没有办法解决它,而无需重新创建所有表单?:(
我试过添加:
<form #stepOneForm="ngForm">
<button type="submit [disabled]="!stepOneForm.form.valid" mat-button matStepperNext>Go to next step</button>
但它没有帮助...
我的代码如下所示:
HTML
<!-- Name -->
<mat-form-field class="dcp-input-field">
<input matInput placeholder="Name" [formControl]="name" [errorStateMatcher]="matcher">
<mat-hint>Please enter your name</mat-hint>
<mat-error *ngIf="name.hasError('required')">
This is <strong>required</strong> field
</mat-error>
</mat-form-field>
<!-- DoB -->
<mat-form-field class="dcp-input-field">
<input matInput [matDatepicker]="dp" placeholder="Date of Birth" [formControl]="dob" [errorStateMatcher]="matcher">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
<mat-hint>Please enter your date of birth</mat-hint>
<mat-error *ngIf="dob.hasError('required')">
This is <strong>required</strong> field
</mat-error>
</mat-form-field>
<!-- PolicyNo -->
<mat-form-field class="dcp-input-field">
<input matInput placeholder="Policy number" [formControl]="policyNo" [errorStateMatcher]="matcher">
<mat-hint>Please enter your Policy number</mat-hint>
<mat-error *ngIf="policyNo.hasError('required')">
This is <strong>required</strong> field
</mat-error>
<mat-error *ngIf="policyNo.hasError('minlength')">
The value is <strong>too short</strong>
</mat-error>
</mat-form-field>
TS
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(
control: FormControl | null,
form: FormGroupDirective | NgForm | null
): boolean {
const isSubmitted = form && form.submitted;
return !!(
control &&
control.invalid &&
(control.dirty || control.touched || isSubmitted)
);
}
}
name = new FormControl("", [Validators.required]);
dob = new FormControl("", [Validators.required]);
policyNo = new FormControl("", [
Validators.required,
Validators.minLength(6)
]);
matcher = new MyErrorStateMatcher();
谢谢你,对不起菜鸟问题!;)
解决方案
HTML
将所有输入包装在form
标签
中
<form #stepOneForm="ngForm">
做
<form (ngSubmit)="onSubmit()" [formGroup]="myForm"></form>
反而
<input matInput placeholder="Name" [formControl]="name" [errorStateMatcher]="matcher">
做
<input matInput placeholder="Name" formControlName="name">
这与所有输入formControlName
不[formControl]
反而
<button type="submit [disabled]="!stepOneForm.form.valid" mat-button matStepperNext>Go to next step</button>
做
<button type="submit" [disabled]="myForm.invalid" mat-button matStepperNext>Go to next step</button>
--当您尝试显示错误消息以访问输入错误验证
时
name.hasError('required')
做
myForm.get('name').errors?.required
//or
myForm.get('name').errors['required']
两种检查错误的方法都会起作用,它们之间的主要区别safe navigation operator (?.)
就像你说“干草角度检查首先是否有错误(不是未定义或未定义)然后检查所需的错误类型,maxLength ...等”主要目的是防止javascript从引发cannot read property
参考安全导航操作员的错误
或(另一个验证案例)
*ngIf="myForm.get('name').invalid && myForm.get('name').touched"
TS
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...']
})
export class myApp implements OnInit {
myForm: FormGroup;
ngOninit() {
this.myForm = new FormGroup({
'name': new FormControl(null, Validators.required),
'policyNo': new FormControl(null, validators.minLength(5))
// the rest of inputs with the same approach
});
}
onSubmit() {
// when submit the form do something
}
}
你在这里使用的reactive forms
不是template driven
每个都有不同的用途确保你对两者都使用正确的方法,因为你把那些搞砸reactive approach
了template driven approach
一切的东西弄乱了。推荐阅读Reqctive Froms Template Forms
推荐阅读
- java - Java:在 PC 上编译包时出错
- ruby-on-rails - 在渲染块内使用 content_for 传递 html
- docker - 从停止的 docker 容器中删除文件(不创建新图像)
- python - 如何从后台启动的python运行内置的shell命令?
- flutter - Flutter中什么时候需要类路径结构named-route(例如'/a/b/c')?
- jhipster - 如何去掉微服务前面的“服务”
- .htaccess - 如何使用 htaccess 重写子文件夹中文件的 URL
- python - IDLE shell 上下文文档损坏?
- android - 如何为片段设置观察者
- c++ - 如何检测类是否具有模板化成员函数?