Question

我想创建一个用户将输入他的First_Name和Last_Name的表单。我想在客户端验证这些字段。

在Angular 2中是否有任何通用的表单验证器，我也希望在客户端显示错误消息。如何显示错误消息？

贝娄是我的代码

html文件

<form [formGroup]="myForm"  (ngSubmit)="submit()" >
<ion-row>
  <ion-item>
    <ion-label primary floating>FIRST NAME</ion-label>
    <ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input>
  </ion-item>

 <ion-item>
   <ion-label primary floating>LAST NAME</ion-label>
   <ion-input type="text" id="lastname"  class="form-control" formControlName="lastname" ></ion-input>
 </ion-item>
</ion-row>
</form>

ts文件：

this.myForm = formBuilder.group({
   'firstname'  :  ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(10)])],
   'lastname'   :  ['', Validators.compose([Validators.required, Validators.minLength(1), Validators.maxLength(10)])],})

后端端点名称和字段名称：

submit(){
    let registerNewUserObj ={
       first_name:this.myForm.value.firstname,
       last_name:this.myForm.value.lastname

Answer 1

使用此代码显示错误消息。

<ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input>
<p class="errorMessage" *ngIf="myForm.controls.firstname.errors && myForm.controls.firstname.dirty ">Please provide first name.</p>

如何在Angular 2中显示验证错误消息

1 个答案: