在角度，如何添加验证后，控件的表单控制创建？

我们有一个具有动态构建形式的组件。用验证器添加控件的代码可能如下所示:

var c = new FormControl('', Validators.required);

但是，假设我想添加第2验证器 回见。我们如何才能做到这一点？我们在网上找不到任何相关文档。但是我发现在表格控制中有 setValidators

this.form.controls["firstName"].setValidators

但是不清楚如何添加一个新的或自定义的验证器。

178761 次浏览
小开
最佳答案

您只需向 FormControl传递一个验证器数组。

下面的例子展示了如何向现有的 FormControl 添加验证器:

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

注意，这将重置您在创建 FormControl时添加的任何现有验证器。

角度12报告

从角度12开始，如果你想在不删除现有验证器的情况下向表单添加新的验证器，你可以使用 addValidator:

this.form.controls["firstName"].addValidators([Validators.minLength(1), Validators.maxLength(30)]);
小开

添加到@Delosdos 的帖子中。

在 FormGroup中为控件设置 验证器: this.myForm.controls['controlName'].setValidators([Validators.required])

从 FormGroup 中的控件中移除 验证程序: this.myForm.controls['controlName'].clearValidators()

一旦运行了以上任何一行，更新 FormGroup。 this.myForm.controls['controlName'].updateValueAndValidity()

这是一种以编程方式设置表单验证的神奇方法。

小开

如果您使用的是 reactiveFormModule，并且将 formGroup 定义为:

public exampleForm = new FormGroup({
name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
email: new FormControl('test@example.com', [Validators.required, Validators.maxLength(50)]),
age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

比你能够用这种方法给 FormControl 添加一个新的验证器(留着旧的)要多:

this.exampleForm.get('age').setValidators([
Validators.pattern('^[0-9]*$'),
this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
Validators.email,
this.exampleForm.get('email').validator
]);

Validator 返回一个包含所有先前定义的验证器的组合验证器。

小开

我认为选择的答案是不正确的，因为最初的问题是“如何在创建 formControl 之后添加一个新的验证器”。

据我所知，那是不可能的。您唯一能做的就是动态地创建验证器数组。

但是我们忽略了一个函数 addValidator () ，它不会覆盖已经添加到 formControl 中的验证器。如果有人对这个要求有答案，请在这里发布。

小开

除了 Eduard Void 的答案，这里还有 addValidators的方法:

declare module '@angular/forms' {
interface FormControl {
addValidators(validators: ValidatorFn[]): void;
}
}


FormControl.prototype.addValidators = function(this: FormControl, validators: ValidatorFn[]) {
if (!validators || !validators.length) {
return;
}


this.clearValidators();
this.setValidators( this.validator ? [ this.validator, ...validators ] : validators );
};

使用它，您可以动态地设置验证器:

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);
小开

一个简单的解决方案是首先获取表单控件中的所有验证器，并在需要代码时为其分配一个新的 validatorFn。

//get existing validators and assign a new validator


const formControl = this.form.controls["firstName"];


const validators: ValidatorFn[] = !!formControl.validator ?
[formControl.validator, Validators.required] :
[Validators.required];


formControl.setValidators(validators);

Validtor 保存现有的验证器(而不是异步验证器) 我们使用三值函数检查它是否为 null，然后添加到它(在这里我们向它添加所需的验证器) ，否则，我们只是分配新的验证器

小开

如果需要删除添加的窗体控件上的某些现有验证，请调用该控件的下面函数

this.form.controls["name"].clearValidators();

之后，您需要调用下面的函数来更新窗体控件，它将立即对窗体控件生效。

this.form.controls['name'].updateValueAndValidity();

如果需要在已经添加的窗体控件上添加一些验证，请调用该控件的下面函数

this.signupForm.controls['name'].setValidators([Validators.required]);

在调用 updateValueAndValidity()函数之后，它将立即被反映出来。

小开

根据其他窗体控件的值更新验证程序。

首先设定表格:

  form: FormGroup = new FormGroup({
firstName: new FormControl<string>(null),
lastName: new FormControl<string>(null),
});

然后在 init 上:

  ngOnInit(): void {
this.form.get('firstName').valueChanges.subscribe((value) => {
if (value) {
this.form.get('lastName').setValidators(Validators.nullValidator);
} else {
this.form.get('lastName').setValidators(Validators.required);
}
this.form.get('lastName').updateValueAndValidity({ emitEvent: false });
});
this.form.get('lastName').valueChanges.subscribe((value) => {
if (value) {
this.form.get('firstName').setValidators(Validators.nullValidator);
} else {
this.form.get('firstName').setValidators(Validators.required);
}
this.form.get('firstName').updateValueAndValidity({ emitEvent: false });
});
}

添加 { emitEvent: false }非常重要，这样就不会出现 超过最大调用堆栈大小错误


提交答案