我可以通过 angular 自定义验证方法返回一个字符串值吗

Question

Here is my working validation method (but notice where I try to sneak in res):

  checkIfEmailExists(email: string): Observable<object | null> {
    return this.store.pipe(
      select(selectAssigneeNameByEmail(email)),
      debounceTime(500),
      take(1),
      map(name => {
        return res ? { alreadyExists: true, name } : null;
      })
    );

and here is where I call it in component (and would like to also consume the name from above but how? Pipe?:

 alreadyExists(control: AbstractControl): object {
    return this.emailAlreadyExistsValidator.checkIfEmailExists(control.value)
 }

html:

<mat-error *ngIf="form.get('email').hasError('alreadyExists')">email already associated with {{name}}</mat-error>

So, I just want to be able to use res from above to say, sorry that email is already associated with {{name}}

Answer 1

since your error object returned from the validation already returns the name (via {alreadyExists: true, name} object), you can simply get it from the form:

<mat-error *ngIf="form.hasError('alreadyExists', 'email')">
  email already associated with {{ form.getError('name', 'email') }}
</mat-error>

A good idea IMO would be to return the associated error message straight from the validator:

return res ? { alreadyExists: `E-mail already associated with ${name}` } : null;

And then on the HTML:

<mat-error *ngIf="form.getError('alreadyExists', 'email'); let errorMsg">
  {{ errorMsg }}
</mat-error>