在formArray

时间:2019-07-22 11:13:23

标签: validation ionic3 angular6 formarray formgroups

我有一个离子列表,其中有两个离子项。在离子项目中,我有离子输入,可在单击添加按钮时动态添加。 我想为每个离子输入显示验证消息,验证有效,只有红线出现,但是消息 没有显示。 下面是我的代码。

 <form [formGroup]="myForm">
  <ion-list *ngFor="let data of data">
  <ion-row>
   <ion-col col-6>
         <div formArrayName="options">
  <ion-item  *ngFor="let choice of customOptions.controls; let i = index;">
         <ion-input placeholder="Name" type="text"
            [formControlName]="i">
         </ion-input>
         <div *ngIf="choice.invalid && (choice.dirty || choice.touched)"
         class="alert">
              <div *ngIf="choice.hasError('required')">
          Name is required
              </div>
            </div>



 </ion-item>
         </div>
   </ion-col>

     <ion-col col-6>
           <div formArrayName="options1">
     <ion-item  *ngFor="let choice of customOptions1.controls; let j = index;">
         <ion-input placeholder="Phone" type="tel"
                [formControlName]="j">
         </ion-input>
      </ion-item>
           </div>
   </ion-col>
  </ion-row>
  </ion-list>
  </form>
     <div *ngIf="customOptions.controls.length < 5">
  <button (click)="add()">Add</button>
     </div>

下面是我的ts代码

  myForm: FormGroup;
customOptions: FormArray = null;
customOptions1: FormArray = null;
  data = [];

     constructor(private fb: FormBuilder){
       //here I am getting data from api
     this.data = [
       {
         name: "Ananya",
         phone: "9878676767"
       },

     ];
     this.myForm = new FormGroup({
          options: new FormArray([
        new FormControl('',Validators.required),
      ]),
             options1: new FormArray([
        new FormControl('',Validators.compose([Validators.maxLength(10), Validators.required])),
      ]),
    });
     this.customOptions = this.myForm.get('options') as FormArray;
     this.customOptions1 = this.myForm.get('options1') as FormArray;

}


  add(){
     this.customOptions.push(new FormControl('',Validators.required))
      this.customOptions1.push(new FormControl(
        '',Validators.compose([Validators.maxLength(10), Validators.required])
      ))
  }

如果无效,任何人都可以帮助我如何显示错误消息。

0 个答案:

没有答案
相关问题