[英]How to set an errors on mat-input after some time in Angular?
延遲一段時間后,我需要在輸入字段上顯示驗證錯誤。 到目前為止,我有這個代碼。
html
<form [formGroup]="myGroup">
<mat-form-field>
<mat-label>Age</mat-label>
<input matInput formControlName="age" placeholder="0">
</mat-form-field>
<span class="error" *ngIf="myGroup.get('age').hasError('maxlength')">age should be max 2 digits.</span>
</form>
typescript
myGroup: FormGroup;
constructor () {
this.myGroup = new FormGroup({
age: new FormControl(null, {
validators: [Validators.maxLength(2)]
}),
});
}
我需要在 1 秒鍵入結束后顯示驗證消息。 怎么做。
在您的情況下,您不必使用控制驗證器機制。 您可以創建一個完全控制自己的替代方案。 每個控件都公開了一個可觀察的valueChanges
,您可以利用它並使用RxJS
debounceTime
myGroup: FormGroup;
constructor () {
this.myGroup = new FormGroup({
age: new FormControl(null)
});
}
ngOnInit() {
const age = this.myGroup.get('age');
if (age) {
age.valueChanges.pipe(
debounceTime(1000)
).subscribe(() => age.setErrors(Validators.maxLength(2)(age)))
}
}
我從這篇很棒的媒體文章中找到了上面的代碼。
在這里找到工作演示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.