首页 文章

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

提问于
浏览 次
1

我想创建一个表单，用户将在其中输入他的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)])],})

后端 endpoints 名称和字段名称：

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

1 回答

  • 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>
    回复于

相关问题