如何解决不推荐使用 Angular FormBuilder 组
我看到有一个主题看起来像我的,但它并没有真正回答我的问题,因为我们没有以相同的方式管理错误。 FormBuilder group is deprecated
首先,我刚刚迁移到 Angular 11,现在遇到了这个问题:
group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming.
Use the `FormBuilder#group` overload with `AbstractControlOptions` instead.
在此页面中,我会在页面上自动生成许多表单,在日期范围的情况下,我使用两个日期选择器。我创建了一个函数来检查 2 个日期选择器中的值。
组件:
newGroup = this.fb.group(
{
[node.type + '_' + node.objectId + '_dateFrom']: [
'',[Validators.required]
],[node.type + '_' + node.objectId + '_dateto']: [
'',[Validators.required]
]
},{
validator: CheckFromToDate(
node.type + '_' + node.objectId + '_dateFrom',node.type + '_' + node.objectId + '_dateto'
)
}
);
验证器:
export function CheckFromToDate(fromName: string,toName: string) {
return (formGroup: FormGroup) => {
const from = formGroup.controls[fromName];
const to = formGroup.controls[toName];
const dateFrom = new Date(from.value);
const dateto = new Date(to.value);
const today = new Date();
if (to.errors && from.errors) {
// return if another validator has already found an error on the matchingControl
return;
}
if (!from.value) {
from.setErrors({ wrongDate: true });
to.setErrors(null);
} else if (!to.value) {
to.setErrors({ wrongDate: true });
from.setErrors(null);
} else if (dateFrom.getTime() < -3600000) {
from.setErrors({ wrongDate: true });
to.setErrors(null);
} else if (dateFrom > today) {
from.setErrors({ wrongDate: true });
to.setErrors(null);
} else if (dateto.getTime() < -3600000) {
to.setErrors({ wrongDate: true });
from.setErrors(null);
} else if (dateto > today) {
to.setErrors({ wrongDate: true });
from.setErrors(null);
} else if (dateFrom.getTime() > dateto.getTime()) {
from.setErrors({ fromTo: true });
to.setErrors({ fromTo: true });
} else {
from.setErrors(null);
to.setErrors(null);
}
};
}
如何让我的验证器使用 Angular 11 中处理验证器的新方法?
解决方法
更改您的验证器签名
return (formGroup: FormGroup)
到
return (controls: AbstractControl)
然后更改您访问控件的方式
const from = formGroup.controls[fromName];
到
const from= controls.get(fromName);
同时改变你从
报告错误的方式from.setErrors({ wrongDate: true });
到
return from.setErrors({ wrongDate: true }); // note the return statement.
最后一个变化是改变
newGroup = this.fb.group(
{
...
},{
validator: CheckFromToDate(
node.type + '_' + node.objectId + '_dateFrom',node.type + '_' + node.objectId + '_dateTo'
)
}
);
到
newGroup = this.fb.group(
{
...
},node.type + '_' + node.objectId + '_dateTo'
)
} as AbstractControlOptions
);
注意对 AbstractControlOptions
的转换,这应该会删除已弃用的警告。
您可以参考official documentation了解详细说明。
,用户,验证器应该返回一个对象(如果错误)或 null(如果不是错误)。你不会使用 setError。替换你的 from.setErrors 和 to.setErrors,你可以返回,例如如果有错误,像
这样的对象{errorFrom:...,errorTo:...}
所以,你的验证器喜欢
return (formGroup: FormGroup) => {
...
const error={errorFrom:null,errorTo:null}
if (to.errors && from.errors) {
// return if another validator has already found an error on the matchingControl
return null;
}
if (!from.value) {
error.errorFrom="wrong Date from"
} else if (!to.value) {
error.errorTo="wrong Date to"
} else if (dateFrom.getTime() < -3600000) {
error.errorFrom="wrong Date from"
} else if (dateFrom > today) {
error.errorTo="From greater than today"
} else if (dateTo.getTime() < -3600000) {
error.errorTo="wrong Date to"
} else if (dateTo > today) {
error.errorTo="To greater than today"
} else if (dateFrom.getTime() > dateTo.getTime()) {
error.errorTo="from greater than to"
error.errorFrom="from greater than to"
}
//if error.errorTo!=null or error.errorFrom!=null,the error,else null
return error.errorTo || error.errorFrom? error:null;
};
你照常控制
<span *ngIf="form.get(node.type + '_' + node.objectId + '_dateFrom').errors?.errorFrom>
{{form.get(node.type + '_' + node.objectId + '_dateFrom').errors.errorFrom}}
</span>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。