Angular中的自定义验证无法处理KeyPress事件

Question

我在Form中有两个字段。

<input type='text' maxlength='2' formControlName="userIdMinLength" 
class='e-input' (keypress)='omitSpecialCharacters($event);'>
<input type='text' maxlength='2' formControlName="userIdMaxLength" 
class='e-input' (keypress)='omitSpecialCharacters($event);'>
<div class="col-md-12" *ngIf="submitted && f.userIdMaxLength.errors">
<div class="invalid-feedback">
<div *ngIf="f.userIdMaxLength.errors.fieldShouldBeGrater">
The Maximum User ID length should be greater than the Minimum User ID
length.
</div>
</div>
</div>

我使用按键事件来验证输入，如下所示：

omitSpecialCharacters(event) {
return /^[0-9]*$/.test(event.key);
}

在AppComponent.ts文件中，我有一个Form对象和自定义验证，如下所示：

export class AppComponent implements OnInit {
constructor(
private fb: FormBuilder,
) {
this.initializeForm();
}
ngOnInit() {
this.getData();
}
initializeForm() {
this.myFom= this.fb.group({
userIdMinLength: [null, Validators.required],
userIdMaxLength: [null, Validators.required],
},
{
validator: [
FieldShouldBeGreater('userIdMinLength', 'userIdMaxLength')
});
}
}

我的自定义验证代码看起来像：

export function FieldShouldBeGreater(sourceControl: string, comparingToControl: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[sourceControl];
const comparingTo = formGroup.controls[comparingToControl];
if (control && comparingTo) {
if (comparingTo.errors && !comparingTo.errors.fieldShouldBeGrater) {
return;
}
if (control.value > comparingTo.value) {
comparingTo.setErrors({ fieldShouldBeGrater: true });
} else {
comparingTo.setErrors(null);
}
}
return null;
};
}

这里，问题出在按键上。当我为userIdMinLength字段输入5，并开始为userIdMaxLength输入10时它总是从10(即1(开始计算第一个字符，并与5进行比较，从而产生错误。

如何处理？

Answer 1

您可以用setTimeout(() => {...}, 1000)包装它，这样它就不会立即设置错误。您可以通过解析错误语句或null来轻松完成此操作，并且只有当当前值与解析语句返回的值相同时才设置错误。请注意，您还需要将验证签名更改为异步验证函数。