代码之家 › 专栏 › 技术社区 › gaurang

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

ionic3 ionic2 ionic-framework validation javascript

gaurang · 技术社区 · 7 年前

我正在使用dynamic 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>

1 回复 | 直到 6 年前

HasilT 6 年前

您可以使用 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 (页/主页)。