这是我的主要代码:
get emailFormArray() {
return this.formGroup.get("emails") as FormArray;
}
public ngOnInit() {
this.formGroup = this.formBuilder.group({
emails: this.formBuilder.array([]),
});
this.addEmailFormGroup();
}
public addEmailFormGroup() {
this.emailFormArray.controls.push(
this.formBuilder.group({
email: ['', Validators.email],
}),
);
}
以及在我的模板中
{{ formGroup.valid }}
{{ emailFormArray.valid }}
<ng-container *ngFor="let email of emailFormArray.controls">
{{ email.valid }}
{{ email.get('email').valid }}
</ng-container>
当我输入无效的电子邮件时,模板中的结果为true true false false
,为什么formGroup
和emailFormArray
有效?谢谢!
答案 0 :(得分:1)
我找到了原因。
我应该使用this.emailFormArray.push
而不是this.emailFormArray.controls.push
答案 1 :(得分:1)
我在从数据库加载数据和更新数据时遇到了同样的问题,它没有保留验证规则。表单控件设置直接值的问题
loadSlideItemFromDB(slideShowItem): FormArray {
const formArray = new FormArray([]);
slideShowItem.forEach(item => {
formArray.push(this.fb.group({
id: item.Id,
slideShowId: item.SlideShowId,
pageType: item.PageType,
linkUrl: item.LinkUrl,
pageTitle: item.PageTitle
}))
});
return formArray;
}
重构代码后,我先用验证规则创建表单数组,然后为它创建patchValue
。
我为关心的人分享这个。
loadSlideItemFromDB(slideShowItem): FormArray {
const formArray = new FormArray([]);
slideShowItem.forEach(item => {
let group = this.fb.group({
id: [''],
slideShowId: [''],
pageType: ['1', Validators.required],
linkUrl: ['', Validators.required],
pageTitle: ['']
})
group.patchValue({
id: item.Id,
slideShowId: item.SlideShowId,
pageType: item.PageType,
linkUrl: item.LinkUrl,
pageTitle: item.PageTitle
});
formArray.push(group);
});
return formArray;
}