如何解决Angular 反应形式验证子控件中所需的状态
我有一个实现 ControlValueAccessor
和 Validator
的自定义组件。该组件用在 form
中,我在 HTML 中创建自定义控件时设置了 formControlName
。
所有这些都运行良好,但缺少的部分是让孩子的 input
控件知道它应该是必需的。当必需组件中没有值时,我正在使用引导程序使字段显示为红色,但此子组件不会触发该错误。
我需要从 validate
方法返回什么来表示错误?我将以下内容作为验证的开始,它确实看到该字段是必需的,并且它没有值,但我不确定失败时应该返回什么。
validate(c: FormControl): ValidationErrors | null {
if (c.value)
return c.value instanceof WorkerDTO ? null : {isWorkerObject: false}
const validator = c.validator?.({} as AbstractControl)
return validator && validator.required ? {hasValue: false} : null
}
解决方法
你可以返回这样的东西
validate(c: FormControl): ValidationErrors | null {
const validator = c.validator?.({} as AbstractControl)
if (validator && validator.required) {
if (c.value === undefined || c.value === null)
return {c: true}
来自角度文档
验证错误对象通常有一个属性,其名称是验证键 .... ,其值是您可以插入到错误消息中的任意值字典,
编辑。
我的回答显示将字段返回为无效。那么如果你想在视图中显示显式错误,一种方法是使用验证器的名称在 html 中抓取错误
例如来自angular doc:
<div *ngIf="name.errors?.required">
Name is required.
</div>
<div *ngIf="name.errors?.minlength">
Name must be at least 4 characters long.
</div>
<div *ngIf="name.errors?.forbiddenName">//this is a custom validator
Name cannot be Bob.
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。