Angular 7 CustomValidator никогда не действует

Question

Я знаю, что это мог быть возможный дубликат, но дубликат не помог мне, потому что мой валидатор не установлен на уровне FormGroup. Валидатор работает. Переменная res дает мне true, когда имя пользователя уже занято, и false, если нет.

Класс валидатора:

    @Injectable({ providedIn: 'root' })
    export class AlreadyTakenValidator {

        static checkUsername(registrationService: RegistrationService) {
            return (control: AbstractControl) => {
                if (control.value == "") {
                    return null;
                }
                console.log(control.value)
                return registrationService.checkUsername(control.value).subscribe(res => {
                    console.log("ab " + res)
                    if(res) {
                        const usernameIsTaken = true;
                        console.log("usernameIsTaken " + usernameIsTaken)
                        return (usernameIsTaken);

                    } else {
                        console.log("bischt null kerle?" + res)
                        const usernameIsTaken = null;
                        console.log("usernameIsTaken " + usernameIsTaken)
                        return usernameIsTaken;
                    }

                    return res ? { usernameIsTaken: true } : null;
                });
            }
        }

Я просто так сделал, чтобы всё проверить. Обычно последней строки return res ? { usernameIsTaken: true } : null; должно быть достаточно.

Мой TS:

    public buildForm() {
        this.registerForm = this.form.group({
          username: ['', [Validators.required, Validators.minLength(this.minLength), CustomValidators.validateCharacters, AlreadyTakenValidator.checkUsername(this.registrationService)]],
          email: ['', [Validators.required, Validators.email, CustomValidators.validateCharacters]],
          password: ['', [Validators.required]],
          passwordConfirmation: ['', Validators.required],
        }, {
            validator: MustMatch('password', 'passwordConfirmation')
          });

        this.personalForm = this.form.group({
          firstname: ['', [Validators.required, NoWhitespaceValidator()]],
          lastname: ['', [Validators.required, NoWhitespaceValidator()]],
          country: ['', [Validators.required]],
          dateOfBirth: ['', [Validators.required]],
          gender: ['', [Validators.required]],
        })
      }

AlreadyTakenValidator.checkUsername(this.registrationService) это проблема.

В html я просто звоню:

          <mat-error class="invalid-feedback"
            *ngIf="f.username.touched && f.username.errors && f.username.errors.usernameIsTaken">
            Already taken
          </mat-error>
          <mat-error class="invalid-feedback"
            *ngIf="f.username.touched && f.username.errors && f.username.errors.required">
            {{ 'REGISTRATION.USERNAME' | translate }} {{ 'VALIDATION.REQUIRED' | translate }}
          </mat-error>
          <mat-error class="invalid-feedback"
            *ngIf="f.username.touched && f.username.errors && f.username.errors.minlength">
            {{ 'VALIDATION.MINLENGTH' | translate }} {{ minLength }}
          </mat-error>
          <mat-error class="invalid-feedback"
            *ngIf="f.username.touched && f.username.errors && f.username.errors.invalid_characters">
            {{ 'VALIDATION.CHARACTERS' | translate }}

Также мой CustomValidators.validateCharacters валидатор настроен так, как говорит само название, и работает нормально, но этот не так.

Answer 1

код component.ts

  checkUsername(control: AbstractControl) {
  return new Promise((resolve, reject) => {
  setTimeout(() => {
    if (control.value === 'super@secret.com') {
        resolve({ emailIsTaken: true })
    } else {resolve(null)}
  }, 2000)
 })
}

component.html Код:

<form [formGroup]="form">
<input type="text" placeholder="Enter your email" formControlName="email"/>
<button type="submit" [disabled]="form.invalid">SEND</button>
<div *ngIf="form.get('email').pending">
<p>Form valid {{form.valid}}</p>
<p>Form invalid {{form.invalid}}</p> 
</form>

пожалуйста, измените как мудрый в вашем коде это демо-код

Answer 2

Вы должны вернуться вот так

import { of } from "rxjs/observable/of";

return of(res ? null : { usernameIsTaken: true });

Мой полный пример, подобный этому

<form (ngSubmit)="onSubmit()" [formGroup]="loginForm">
    <div class="form-group">
      <label for="UserName">Your email</label>
      <input
        type="text"
        class="form-control"
        id="UserName"
        name="UserName"
        required
        formControlName="UserName"
      />
      <div
        *ngIf="UserName.invalid && (UserName.dirty || UserName.touched)"
        class="alert alert-danger"
      >
        <div *ngIf="UserName.errors.required">
          Email is required
        </div>

        <div *ngIf="UserName.errors.whitespace">
          input contain whitespace
        </div>
      </div>
    </div>

Тогда в моем компоненте

export class LoginComponent implements OnInit {
  public loginForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}

  get UserName() {
    return this.loginForm.get("UserName");
  }

  ngOnInit() {
    this.buildForm();
  }


  private buildForm() {
    this.loginForm = this.formBuilder.group({
      UserName: ["", Validators.required, this.noWhitespaceValidator],
      Password: ["", Validators.required, this.noWhitespaceValidator]
    });
  }

  private noWhitespaceValidator(control: FormControl) {
    const isWhitespace = (control.value || "").trim().length === 0;
    const isValid = !isWhitespace;
    return of(isValid ? null : { whitespace: true });
  }
}

машинопись