我有一个离子列表,其中有两个离子项。在离子项目中,我有离子输入,可在单击添加按钮时动态添加。 我想为每个离子输入显示验证消息,验证有效,只有红线出现,但是消息 没有显示。 下面是我的代码。
<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])
))
}
如果无效,任何人都可以帮助我如何显示错误消息。