gpt4 book ai didi

Angular - FormBuilder.group 不接受验证器数组

转载 作者:行者123 更新时间:2023-12-04 12:45:41 28 4
gpt4 key购买 nike

我试图使用 Angular FormBuilder 提供的额外参数映射

group(controlsConfig: {
[key: string]: any;
}, extra: {
[key: string]: any;
} | null = null): FormGroup

文档: FormBuilder

但面对

this.validator is not a function



如果我传递单个验证器而不是数组,则上述错误消失但验证不会发生?

有人可以帮我解决这个问题或提供使用额外 map 参数的正确方法吗?

我的组件及其对应的模板如下:

app.component.ts
import { Component } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
formGroupNew: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.formGroupNew = this.fb.group(
{ name: "Provide name"},
{ validator: [Validators.required, Validators.maxLength(5)] } );
}

validate() {
console.log(this.formGroupNew.controls["name"].status);
}
}

app.component.html:
<div class="container" [formGroup]="formGroupNew">
<input class="form-control" formControlName="name">
<button (click)="validate()">Validate</button>
</div>

最佳答案

当您这样做时fb.group({...}, {validator: fn}) ,第一个参数是组的控件,第二个参数是组对象本身的配置参数,而不是其中包含的控件。

错误是因为根据src,该方法期望接收一个函数而不是一个数组。 .
ValidatorFn您可以通过那里将应用于FormGroup对象,因此您可以创建自定义函数来检查组中多个控件的条件。出于这个原因,传递类似 Validators.length(5) 的东西是没有意义的。 ,因为组的值是一个对象(您将如何根据对象检查该条件?)。相反,Validators.required这是有道理的,因为当未设置所有控件时,该值可能为 null。

假设您有两个自定义验证器函数:CustomValidatorFnOne , CustomValidatorFnTwo并且您想将它们应用到组加上所需的。你可以这样做:

fb.group({...}, {
validator: Validators.compose(
[
CustomValidatorFnOne,
CustomValidatorFnTwo,
Validators.required
]
)
})

这样你就可以将所有验证器组合成一个函数。

关于Angular - FormBuilder.group 不接受验证器数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49346428/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com