我有这样的表格:
export class CreateOrUpdatePage implements OnInit {
createOrUpdateForm: FormGroup;
constructor(private formBuilder: FormBuilder
, private modalCtrl: ModalController) {
this.createOrUpdateForm = this.formBuilder.group({
name: ['', [Validators.required]],
//how to set it here
emails: this.formBuilder.array([this.formBuilder.group({ email:'' })])
});
}
ngOnInit() {
//this doesn't work...
this.createOrUpdateForm.controls.emails.setValidators(Validators.required);
}
get f() { return this.createOrUpdateForm.controls; }
get emails() {
return this.createOrUpdateForm.get('emails') as FormArray;
}
async onSubmit() {
// stop here if form is invalid
if (this.createOrUpdateForm.invalid) {
return;
}
}
}
在视图中,我有一个基于有效表单而启用或禁用的按钮,如下所示:
<ion-button (click)="onSubmit()" [disabled]="!createOrUpdateForm.valid || isLoading">
<ion-icon name="checkbox" slot="icon-only"></ion-icon>
</ion-button>
仅当我在名称字段中未输入任何内容时,此按钮才禁用。但是,我希望按钮被禁用,即使使用Angular验证程序的电子邮件中没有任何值也是如此。我可以使用一些自定义逻辑来做到这一点,但我想使用内置的验证器来实现。有可能吗?