Angular 反应式表单以编程方式触发验证
Angular ReactiveForm triggers validation programmatically
假设模板有这样的代码片段:
<form #myForm="ngForm">
<md-input-container>
<input mdInput name="address" [formControl]="addressCtrl" [(ngModel)]="address" required>
</md-input-container>
</form>
组件有这样的东西:
export class AddressComponent {
@ViewChild("myForm")
myForm: NgForm;
addressCtrl = new FormControl();
address: string;
constructor() {}
validate() {
this.addressCtrl.markAsTouched();
console.log("Is address valid? " + this.addressCtrl.valid);
console.log("Is myForm valid? " + this.myForm.form.valid);
}
}
validate() 由其他一些操作调用,旨在以编程方式触发表单验证。
但是在控制台日志中,显示addressCtrl无效,而myForm仍然有效。
有人知道如何在 myForm 的任何子控件无效时将其状态更新为无效吗?
谢谢!
您正在使用设计为独立的 formControl
指令,因此它不会在父 formGroup
中注册自己。如果显示该组的控件,您将看到您创建的控件不属于该组:
console.log(this.form.value); // {}
console.log(this.myForm.controls); // undefined
您需要使用 formControlName
指令,但为此您必须在 class:
中创建一个 formGroup
addressCtrl = new FormControl();
group = new FormGroup({address: this.addressCtrl});
validate() {
console.log('Is address valid? ' + this.addressCtrl.valid); // false
console.log('Is myForm valid? ' + this.group.valid); // false
}
和HTML:
<form [formGroup]="group">
<md-input-container>
<input mdInput name="address" formControlName="address" [(ngModel)]="address" required>
</md-input-container>
</form>
假设模板有这样的代码片段:
<form #myForm="ngForm">
<md-input-container>
<input mdInput name="address" [formControl]="addressCtrl" [(ngModel)]="address" required>
</md-input-container>
</form>
组件有这样的东西:
export class AddressComponent {
@ViewChild("myForm")
myForm: NgForm;
addressCtrl = new FormControl();
address: string;
constructor() {}
validate() {
this.addressCtrl.markAsTouched();
console.log("Is address valid? " + this.addressCtrl.valid);
console.log("Is myForm valid? " + this.myForm.form.valid);
}
}
validate() 由其他一些操作调用,旨在以编程方式触发表单验证。
但是在控制台日志中,显示addressCtrl无效,而myForm仍然有效。
有人知道如何在 myForm 的任何子控件无效时将其状态更新为无效吗?
谢谢!
您正在使用设计为独立的 formControl
指令,因此它不会在父 formGroup
中注册自己。如果显示该组的控件,您将看到您创建的控件不属于该组:
console.log(this.form.value); // {}
console.log(this.myForm.controls); // undefined
您需要使用 formControlName
指令,但为此您必须在 class:
formGroup
addressCtrl = new FormControl();
group = new FormGroup({address: this.addressCtrl});
validate() {
console.log('Is address valid? ' + this.addressCtrl.valid); // false
console.log('Is myForm valid? ' + this.group.valid); // false
}
和HTML:
<form [formGroup]="group">
<md-input-container>
<input mdInput name="address" formControlName="address" [(ngModel)]="address" required>
</md-input-container>
</form>