如何显示来自 AsyncValidatorFn 的消息

Question

我正在实施 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>

想法是，如果作为返回值，则错误可能是正确的。

不工作。我做错了什么？

Answer 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)]
  });

如何显示来自 AsyncValidatorFn 的消息

How to show the message from AsyncValidatorFn

javascript

angular

angular7