如何显示来自 AsyncValidatorFn 的消息答案

【问题标题】：How to show the message from AsyncValidatorFn如何显示来自 AsyncValidatorFn 的消息
【发布时间】：2020-01-07 15:32:41
【问题描述】：

我正在实现 AsyncValidatorFn。

服务：

public verifyExistingRegisterScheduled(workschedule: WorkSchedule): Observable<Result<any>> {
return this.dataService.post<Result<any>>('/workschedule/existing-register-scheduled', workschedule);

}

组件：

createForm() {
this.scheduleForm = this.formBuilder.group({
  searchText: [this.searchText],
  codEnd: [this.workschedule.codEnd, Validators.required],
  dataInicio: [this.workschedule.dataInicio, Validators.required],
  dataFim: [this.workschedule.dataFim, Validators.required],
  periodo: [this.workschedule.periodo, Validators.required],
  justificativa: [this.workschedule.justificativa, Validators.required],
  totalColaboradores: [this.workschedule.totalColaboradores],
  totalTerceiros: [this.workschedule.totalTerceiros]
},
  {
    validator: [dateLessThanValidator, existingRegisterScheduledValidator(this.workScheduleService, this.workschedule)]
  });

}

验证器：

export function existingRegisterScheduledValidator(workScheduleService: WorkscheduleService, workschedule: WorkSchedule): AsyncValidatorFn {
return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    return workScheduleService.verifyExistingRegisterScheduled(workschedule).pipe(map(result => {
        debugger;
        return (result.content && result.content.length > 0) ? { 'registerExists': true } : null;
    }));
}

};

HTML

<div *ngIf="scheduleForm.errors && scheduleForm.errors['registerExists']" class="alert alert-danger col-sm-12">Message.</div>

这个想法是，如果返回值，那么错误可能是真的。

不工作。我做错了什么？

【问题讨论】：

标签： javascript angular angular7

【解决方案1】：

您错误地配置了asyncValidator。用法见docs

createForm() {
this.scheduleForm = this.formBuilder.group({
  searchText: [this.searchText],
  codEnd: [this.workschedule.codEnd, Validators.required],
  dataInicio: [this.workschedule.dataInicio, Validators.required],
  dataFim: [this.workschedule.dataFim, Validators.required],
  periodo: [this.workschedule.periodo, Validators.required],
  justificativa: [this.workschedule.justificativa, Validators.required],
  totalColaboradores: [this.workschedule.totalColaboradores],
  totalTerceiros: [this.workschedule.totalTerceiros]
},
  {
    validators: [dateLessThanValidator], 
    asyncValidators :[existingRegisterScheduledValidator(this.workScheduleService, this.workschedule)]
  });

【讨论】：