异步验证消息没有在ngx格式中显示

Question

当从ngx-formly库中尝试这个例子时，来自异步验证的消息没有像预期的那样显示在字段下

https://formly.dev/docs/examples/validation/unique-value-async-validation/

当减少async验证器表达式中的超时时，我看到async验证器被立即调用，但是消息是:'这个用户名已经被占用了。'不显示在字段下面!

下面是来自stackblitz链接的代码:

模板

<b>Existing usernames</b>
<ul>
<li *ngFor="let u of existingUsers">{{ u }}</li>
</ul>
<form [formGroup]="form" (ngSubmit)="submit()">
<formly-form [model]="model" [fields]="fields" [options]="options" [form]="form"></formly-form>
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</form>

组件类

import { Component } from '@angular/core';
import { FormGroup, AbstractControl } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';
import { of } from 'rxjs';
@Component({
selector: 'formly-app-example',
templateUrl: './app.component.html',
})
export class AppComponent {
form = new FormGroup({});
model: any = {};
options: FormlyFormOptions = {};
existingUsers = ['user1', 'user2', 'user3'];
fields: FormlyFieldConfig[] = [
{
key: 'username1',
type: 'input',
props: {
label: 'Username (validated using `Promise`)',
placeholder: 'Username',
required: true,
},
asyncValidators: {
uniqueUsername: {
expression: (control: AbstractControl) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(this.existingUsers.indexOf(control.value) === -1);
}, 0);
});
},
message: 'This username is already taken.',
},
},
},
{
key: 'username2',
type: 'input',
props: {
label: 'Username (validated using `Observable`)',
placeholder: 'Username',
required: true,
},
asyncValidators: {
uniqueUsername: {
expression: (control: AbstractControl) => {
return of(this.existingUsers.indexOf(control.value) === -1);
},
message: 'This username is already taken.',
},
},
},
];
submit() {
if (this.form.valid) {
alert(JSON.stringify(this.model));
}
}
}

模块配置:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
FormlyBootstrapModule,
FormlyModule.forRoot({
validationMessages: [{ name: 'required', message: 'This field is required' }],
}),
],
bootstrap: [AppComponent],
declarations: [AppComponent],
})
export class AppModule {}

Stackblitz链接:https://stackblitz.com/edit/angular-f3fx7j?file=src%2Fapp%2Fapp.component.ts, src % 2 fapp % 2 fapp.module.ts

问题:是否有办法在验证不工作时显示异步验证消息?

感谢

Answer 1

步骤01为了向用户显示此消息，您需要订阅可观察对象并在表单控件上设置错误消息。

import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
export function asyncValidator(control: FormControl): Observable<any> {
return new Observable(observer => {
// simulate an asynchronous validation
setTimeout(() => {
if (control.value === 'test') {
observer.next({ asyncValidation: 'Validation failed' });
} else {
observer.next(null);
}
observer.complete();
}, 1000);
});
}

步骤2要正式地在ngx中使用这个验证器，你可以将它定义为字段配置

的一部分。

{
key: 'test',
type: 'input',
templateOptions: {
label: 'Test',
},
validators: {
async: asyncValidator,
},
validation: {
messages: {
asyncValidation: 'Async validation failed',
},
},
},