我创建了一个带有验证检查的表单,
import { FormGroup, Validators, FormControl } from "@angular/forms";
目前我有提交按钮[已禁用],直到表格填写正确.如果表单有效,我向用户显示的唯一方法是在表单字段无效时在输入中显示红色.
我想向用户显示一条错误消息,告诉他们出了什么问题.
是否内置Angular2以显示错误消息或输入字段无效的原因？或者我是否需要为每个表单字段构建自定义错误消息？如果是这样,我将如何检查每个输入字段,让我们说当有人从相应字段离开焦点时.因此,如果他们离开输入字段并且它无效,那么我可以显示一条消息,告诉他们这是无效的,为什么？
我有一个方法来显示消息我只需要提出一种获取和错误消息的方法.换句话说,从表单中生成文本为什么它无效.
例
Please provide a valid mobile number
码
正则表达式
ngOnInit() {
this.personalForm = new FormGroup({
email : new FormControl(this.auth.user.email,Validators.required ),
first_name: new FormControl(null,[
Validators.required,
Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
]),
middle_name: new FormControl(null,[
Validators.required,
Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
]),
last_name: new FormControl(null,[
Validators.required,
Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
]),
dob : new FormControl (null, [
Validators.required,
Validators.pattern("[1][9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]|[2][0][0-9][0-9]-[0-9][0-9]-[0-9][0-9]")
]),
mobile_phone: new FormControl(null, [
Validators.required,
Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]")
]),
home_phone: new FormControl(null, [
Validators.required,
Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]")
]),
business_phone: new FormControl(null, [
Validators.required,
Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]")
]),
fax_number: new FormControl(null, [
Validators.required,
Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]")
]),
ssn: new FormControl(null, [
Validators.required,
Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9]/[0-9][0-9]/[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]")
])
});
}
有效的布尔/句柄表单数据
save(model: Personal, isValid: boolean) {
if (!isValid) {
console.log('Personal Form is not valid');
console.log(model, isValid);
} else {
console.log('Personal Form is valid');
console.log(model, isValid);
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http
.post('http://localhost:4200/api/updateProfile',
model,
{headers: headers})
.map((res: Response) => res.json())
.subscribe((res) => {
//do something with the response here
console.log(res);
});
}
}
形成
<form [formGroup]="personalForm" novalidate (ngSubmit)="save(personalForm.value, personalForm.valid)">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card card-inverse card-success">
<div class="card-header">
<strong>Personal Information</strong>
</div>
<div class="card-block">
<div class="row">
<div class="form-group col-sm-12 col-md-12">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i>
</span>
<input type="text" class="form-control" id="email" formControlName="email" placeholder="{{personal.email}}"readonly>
</div>
<div class="alert alert-danger" *ngIf="!personalForm.controls.email.valid && submitted ">
*Email is required.
</div>
</div>
</div>
最佳答案 摘要
要访问FormGroup输入字段,您可以使用语法来访问您创建的控件.
this.FormGroupName.get('ControlName').status
这将返回VALID或INVALID
就我而言,这就是它的完成方式,
例
导入正确的包,
import {FormGroup, Validators, FormControl } from "@angular/forms";
import {INVALID, VALID} from "@angular/forms/src/model";
创建FormGroup,
personalForm: FormGroup;
创建FormControl,
ngOnInit() {
this.personalForm = new FormGroup({
first_name: new FormControl(null,[
Validators.required,
Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
]),
});
}
如果要检查错误,请将FormControlName添加到表单和要调用的函数.
<input (blur)="firstNameValidate('*First Name Required', 'Use 1-30 letters to spell your name.')" type="text" class="form-control" placeholder="Enter first name" id="first_name" formControlName="first_name">
检查有效或无效,
firstNameValidate(ErrorTitle, ErrorMessage) {
if (this.personalForm.get('first_name').status == VALID) {
this.getSuccess("First Name Entered", "First name entered correctly");
} else {
this.toastWarning(ErrorTitle, ErrorMessage);
}
}
调用错误
在我的情况下,我决定在敬酒中展示我的错误.所以我使用模糊来跟踪用户何时离开输入字段.当用户移出输入字段时,将调用firstNameValidate()函数,并根据值VALID或INVALID显示正确的Toast.根据响应,这两个函数中的一个被触发.
toastWarning(ErrorTitle, ErrorMessage) {
var toastOptions:ToastOptions = {
title: ErrorTitle,
msg: ErrorMessage,
showClose: true,
timeout: 7000,
theme: 'bootstrap',
onAdd: (toast:ToastData) => {
console.log('Toast ' + toast.id + ' has been added!');
},
onRemove: function(toast:ToastData) {
console.log('Toast ' + toast.id + ' has been removed!');
}
};
this.toastyService.warning(toastOptions);
}
getSuccess(SuccessTitle, SuccessMessage) {
var toastOptions:ToastOptions = {
title: SuccessTitle,
msg: SuccessMessage,
showClose: true,
timeout: 5000,
theme: 'bootstrap',
onAdd: (toast:ToastData) => {
console.log('Toast ' + toast.id + ' has been added!');
},
onRemove: function(toast:ToastData) {
console.log('Toast ' + toast.id + ' has been removed!');
}
};
this.toastyService.success(toastOptions);
}
然后用户看到正确的吐司/消息,
成功
警告
