我正在使用动态ion-input,有两个字段,将显示给用户,用户可以添加或删除字段 .
最多为五个字段,最小为两个字段 . 我有另一个输入,我可以正确验证 required 验证,但是如何在运行时验证动态添加的字段,可以是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>