用户填写表格Angular 2时检查表单验证

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,last_name: new FormControl(null,dob : new FormControl (null,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.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,business_phone: new FormControl(null,fax_number: new FormControl(null,ssn: new FormControl(null,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>