在Angular中,可以使用自定义验证器来验证输入字段的更新。下面是一个包含代码示例的解决方法:
import { AbstractControl, ValidatorFn } from '@angular/forms';
export function inputUpdateValidator(existingValue: string): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
const newValue = control.value;
if (newValue === existingValue) {
return { 'inputUpdate': { value: control.value } };
}
return null;
};
}
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { inputUpdateValidator } from './input-update.validator';
@Component({
selector: 'app-form',
template: `
`,
})
export class FormComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
myInput: new FormControl('', [
Validators.required,
inputUpdateValidator('existingValue'), // Pass the existing value to the validator
]),
});
}
}
在上面的例子中,我们创建了一个自定义验证器inputUpdateValidator
,它接受一个参数existingValue
,该参数是已经存在的值。在验证器函数中,我们比较输入字段的新值和现有值,如果它们相等,则返回一个包含错误信息的对象。如果它们不相等,则返回null
,表示验证通过。
在组件中,我们创建了一个名为myForm
的表单,并为myInput
字段应用了自定义验证器。如果输入的值与现有值相等,则显示一个错误消息。
请注意,为了使用自定义验证器,你需要在Angular的表单模块中导入相关的类和函数(如FormControl
、FormGroup
和Validators
)。