我打算以 Angular 实现自定义异步验证器。但它似乎没有用。 控制台没有错误。
validator shouldBeUnique 是一个不工作的异步验证器
验证器 cannotContainSpace 是非异步自定义验证器，它工作得很好。
我无法弄清楚出了什么问题。
查看:
<form [formGroup]="form">
<div class="form-group">
<label for="username">Username</label>
<input
formControlName="username"
id="username"
type="text"
class="form-control">
<div *ngIf="username.errors.cannotContainSpace" class="alert alert-danger">Can not have space</div>
<div *ngIf="username.errors.shouldBeUnique" class="alert alert-danger">shouldBeUniquee</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
formControlName="password"
id="password"
type="text"
class="form-control">
</div>
<button class="btn btn-primary" type="submit">Sign Up</button>
</form>
组件:
export class SignupFormComponent {
form = new FormGroup(
{
username: new FormControl('', [Validators.required,
UsernameValidators.cannotContainSpace, UsernameValidators.shouldBeUnique
]),
password: new FormControl('', Validators.required),
});
get username() {
console.log(this.form.get('username').errors.shouldBeUnique);
return this.form.get('username');
}
}
用户名.validator.ts
export class UsernameValidators {
static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
if ((control.value as string).indexOf(' ') != -1) {
console.log('noo');
return { cannotContainSpace: true };
}
else {
return null;
}
}
static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (control.value === 'arbaaz')
resolve( { shouldBeUnique: false });
else
resolve(null);
}, 2000);
});
}
}
最佳答案
异步验证器应该作为第三个参数放置:
username: new FormControl('',
[Validators.required, UsernameValidators.cannotContainSpace],
[UsernameValidators.shouldBeUnique]),
关于javascript - Angular 异步验证器未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54618262/