Question

我正在使用动态ion-input，有两个字段，将显示给用户，用户可以添加或删除字段。

最多为五个字段，最小为两个字段。我有另一个输入，我可以正确验证必需的验证，但是如何在运行时验证动态添加的字段，可以是2,3,4或5？

我的代码，我已经完成了验证，动态字段如下。有谁可以帮我解决这个问题？

单输入字段

<div text-center [formGroup]="pollQuesValid">
    <ion-item>
        <ion-input type="text" formControlName="questTxt" [(ngModel)]="question">
        </ion-input>
    </ion-item>
    <ion-item *ngIf="!pollQuesValid.controls.questTxt.valid && submitAttemptQues" text-center text-wrap no-lines>
        <p style="color: red">{{"quesValid" | translate }}</p>
    </ion-item>
</div>

pollQuesValid: FormGroup;
submitAttemptQues: boolean = false;
this.pollQuesValid = formBuilder.group({
    questTxt: ["", ([Validators.required])]
});

if (this.pollQuesValid.controls.questTxt.valid) {
    this.submitAttemptQues = false;
    console.log("question valid");
    return true;
} else {
    this.submitAttemptQues = true;
    console.log('question invalid');
    return false;
}

动态字段

<div>
    <ion-item *ngFor="let choice of custOpts; let i = index;">
        <ion-label color="primary" floating>{{choice.hint}} {{i+1}}</ion-label>
        <ion-input type="text" [(ngModel)]="choice.ch"></ion-input>
        <ion-icon class="remove" item-end name="md-remove" *ngIf="i>=2" (click)="removecustOpts()"></ion-icon>
    </ion-item>
    <div *ngIf="custOpts.length < 5" padding>
        <button ion-button icon-only (click)="addNewChoice()">
            <ion-icon name="md-add"></ion-icon>
          </button>
    </div>
</div>

Answer 1

您可以使用FomrArray以反应形式动态添加和验证FormGroup或FormControl。FormArray如果其中的任何一个控件无效（{ angular docs。

首先，定义表单和初始两个字段

pollQuesValid: FormGroup;   
customOptions: FormArray; 
this.pollQuesValid = new FormGroup({
  questTxt: new FormControl('question text', Validators.required),
  options: new FormArray([
     new FormControl('',Validators.required),
     new FormControl('',Validators.required),
  ])
});
this.customOptions = this.pollQuesValid.get('options') as FormArray; //for iterating dynamic fields using *ngFor

然后像这样更改动态字段的html标记

<div text-center [formGroup]="pollQuesValid">
        ...
        <div formArrayName="options">
            <ion-item *ngFor="let choice of customOptions.controls; let i = index;">
                <ion-label color="primary" floating>Hint {{i+1}}</ion-label>
                <ion-input type="text" [formControlName]="i"></ion-input>
                <ion-icon class="remove" item-end name="md-remove" *ngIf="i>=2" (click)="removecustOpts(i)"></ion-icon>
            </ion-item>
            <div *ngIf="customOptions.controls.length < 5" padding>
                <button ion-button icon-only (click)="addNewChoice()">
            <ion-icon name="md-add"></ion-icon>
          </button>
        </div>
    </div>
</div>

这是工作中的StackBlitz example（页面/主页）。

如何在离子中验证动态添加的离子输入

1 个答案: