Angular ReactiveForms - 动态设置的验证器行为异常
Angular ReactiveForms - Dynamically set validators behave unexpectedly
我正在尝试将动态验证添加到 Angular 中的 ReactiveForm
4.
我的问题是 SetValidators()
函数的行为异常。
我想要这样的行为:
输入字段可能为空,但如果用户想要输入内容,输入值必须至少为 4 个字符。
我现在不打算解释它的具体行为,因为我真的不知道它是怎么做的。
请看this plunker。这很简单,也说明了我的问题。
关于我的问题:我在这里做错了什么?这是正确的方法吗?我错过了什么吗?无论是在逻辑上还是在 HTML?
只需在您的表单声明中添加验证器,以便它验证长度但不是必需的,并删除您对 valueChanges
的订阅,因为它 redondant:
this.userForm = this.formBuilder.group({
username: ['', Validators.minLength(4)],
});
我修改了your plunker
通过订阅表单控件的ValueChanges
会导致这个错误Maximum call stack size exceeded
,最好使用它的事件来控制输入的变化(例如keyup)。
并且不要忘记在设置新验证器后使用 updateValueAndValidity
来应用它们。
这是您组件的新代码,现在运行良好:)
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@Component({
selector: 'my-app',
template: `
<div>
<form [formGroup]="userForm">
<section>
<div>
<label>username</label>
<input (keyup)="inputValueChanged($event)" formControlName="username" type="text">
</div>
<button [disabled]="disableSaveButton()">Save</button>
</section>
</form>
</div>
`,
})
export class App implements OnInit {
userForm: formGroup
constructor(private formBuilder: FormBuilder) {
}
disableSaveButton(): boolean {
console.log("is valid:", this.userForm.controls["username"].valid);
return this.userForm.controls["username"].invalid
}
ngOnInit(): void {
this.userForm = this.formBuilder.group({
username: '',
});
}
inputValueChanged(event){
let value = this.userForm.controls["username"].value;
if (value.length > 0) {
console.log("should be invalid if < 4")
this.userForm.controls["username"].setValidators([Validators.required, Validators.minLength(4)]);
} else {
console.log("should be valid")
this.userForm.controls["username"].setValidators([]);
}
this.userForm.controls["username"].updateValueAndValidity();
}
}
@NgModule({
imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
希望对你有帮助:)
我建议制作一个 customValidator 并修改了这个 customValidator
ngOnInit(): void {
this.userForm = this.formBuilder.group({
username: ['',this.customValidator],
});
}
customValidator(input:Formcontrol)
{
let condition:boolean
...change condition depending some variables...
return condition?null:{errorDesc:"Not Valid"}
}
我正在尝试将动态验证添加到 Angular 中的 ReactiveForm
4.
我的问题是 SetValidators()
函数的行为异常。
我想要这样的行为:
输入字段可能为空,但如果用户想要输入内容,输入值必须至少为 4 个字符。
我现在不打算解释它的具体行为,因为我真的不知道它是怎么做的。
请看this plunker。这很简单,也说明了我的问题。
关于我的问题:我在这里做错了什么?这是正确的方法吗?我错过了什么吗?无论是在逻辑上还是在 HTML?
只需在您的表单声明中添加验证器,以便它验证长度但不是必需的,并删除您对 valueChanges
的订阅,因为它 redondant:
this.userForm = this.formBuilder.group({
username: ['', Validators.minLength(4)],
});
我修改了your plunker
通过订阅表单控件的ValueChanges
会导致这个错误Maximum call stack size exceeded
,最好使用它的事件来控制输入的变化(例如keyup)。
并且不要忘记在设置新验证器后使用 updateValueAndValidity
来应用它们。
这是您组件的新代码,现在运行良好:)
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@Component({
selector: 'my-app',
template: `
<div>
<form [formGroup]="userForm">
<section>
<div>
<label>username</label>
<input (keyup)="inputValueChanged($event)" formControlName="username" type="text">
</div>
<button [disabled]="disableSaveButton()">Save</button>
</section>
</form>
</div>
`,
})
export class App implements OnInit {
userForm: formGroup
constructor(private formBuilder: FormBuilder) {
}
disableSaveButton(): boolean {
console.log("is valid:", this.userForm.controls["username"].valid);
return this.userForm.controls["username"].invalid
}
ngOnInit(): void {
this.userForm = this.formBuilder.group({
username: '',
});
}
inputValueChanged(event){
let value = this.userForm.controls["username"].value;
if (value.length > 0) {
console.log("should be invalid if < 4")
this.userForm.controls["username"].setValidators([Validators.required, Validators.minLength(4)]);
} else {
console.log("should be valid")
this.userForm.controls["username"].setValidators([]);
}
this.userForm.controls["username"].updateValueAndValidity();
}
}
@NgModule({
imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
希望对你有帮助:)
我建议制作一个 customValidator 并修改了这个 customValidator
ngOnInit(): void {
this.userForm = this.formBuilder.group({
username: ['',this.customValidator],
});
}
customValidator(input:Formcontrol)
{
let condition:boolean
...change condition depending some variables...
return condition?null:{errorDesc:"Not Valid"}
}