0

我有一个ion-list，ion-items里面有两个。在ion-items我有ion-input哪个将在单击添加按钮时动态添加。我想验证每个ion-input，下面是我的代码。

 <button (click)="add()"></button>
 <form [formGroup]="myForm">
 <ion-list *ngFor="let data of data;">
 <ion-row>
  <ion-col col-6>
    <ion-item>
        <ion-input placeholder="Name" type="text"
            formControlName="name">
    </ion-item>
    <div *ngFor="let validation of validation_msg">
    <div *ngIf="myForm.get(name).hasError(validation.type) && 
    (myForm.get(name).dirty || myForm.get(name).touched)">
        {{ validation.message }}
    </div>
    </div>
  </ion-col>
    <ion-col col-6>
    <ion-item>
        <ion-input placeholder="Phone" type="tel"
            formControlName="phone">
    </ion-item>
        <div *ngFor="let validation of validation_msg">
    <div *ngIf="myForm.get(phone).hasError(validation.type) && 
    (myForm.get(phone).dirty || myForm.get(phone).touched)">
        {{ validation.message }}
    </div>
    </div>
  </ion-col>
 </ion-row>
 </ion-list>
 </form>

下面是我的验证码

  data: any;
     constructor(){
       //here I am getting data from api
     }
     this.myForm = new FormGroup({
      name: new FormControl('', Validators.required),
      phone: new FormControl('',Validators.compose([Validators.maxLength(10), Validators.required])),
    });
     validation_msg = {
    'name': [
      { type: 'required', message: 'name is required.' },
    ],
    'phone': [
      { type: 'maxlength', message: 'Please enter 10 digit' },
      { type: 'required', message: 'Phone no is required.' },
    ],

  };
  add(){
    // Here I am pushing one more value to data
  }

所以正常的表单验证是有效的。但是，当我单击添加按钮时，会出现另外两个字段，并且由于相同 formControlName，它正在清除名字和电话字段中的值。并且所有 4 个字段都显示错误消息。

谁能帮助我如何验证这一点。

4

0 回答 0