Подтвердить имя пользователя Exist Async

Question

Я пытаюсь проверить имя пользователя, говоря, что оно доступно или нет с помощью асинхронного валидатора, я пробовал много решений, но я не знаю, чтобы получить эту работу, у меня есть эта ошибка:

Error: Expected validator to return Promise or Observable.

Мой метод validateUsername () не завершен, как мне заставить его работать?

register.component.ts

this.registerForm = this.fb.group({
            username: ['', [Validators.required], this.validateUsername.bind(this)],
            email: ['', [Validators.required,
                Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')]],
            password: this.fb.group({
                pwd: ['', [Validators.required, Validators.minLength(1)]], // todo
                confirmpwd: ['', [Validators.required, Validators.minLength(1)]]// todo
            }, {
                validator: this.mustMatch('pwd', 'confirmpwd'),
            }),
            birthday: ['', Validators.required]
        });
    }


validateUsername(control: AbstractControl) {
        this.userservice.checkUserExist(control.value).subscribe(
            res => {
                this.exist = 'username available ';
            },
            error => {
                this.exist = 'username unavailable ';
            }
        );
    }

register.component.html

<div class="form-group">
                <label for="inputName" class="font-weight-bold">Usuario</label>
                <div class="input-group Name">
                    <div class="input-group-prepend">
                        <div class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i>
                        </div>
                    </div>
                    <input type="text" class="form-control"  id="inputName" name="inputName" formControlName="username"
                           placeholder="Identificador de usuario">
                </div>
                <div *ngIf="username.invalid && username.touched" class="col-4 p-0 ml-5 text-danger">
                    <p *ngIf="username.errors?.required">
                        Escoger un nombre de usuario
                    </p>
                    <p *ngIf="username.errors?.usertaken">
                        Este usuario ya existe
                    </p>
                </div>
            </div>

Answer 1

Вот пример для вас

Простой компонент инициализирует нашу реактивную форму и определяет наш асинхронный валидатор: validateEmailNotTaken.Обратите внимание, как элементы управления формы в нашем объявлении FormBuilder.group могут принимать асинхронные валидаторы в качестве третьего аргумента.Здесь мы используем только один асинхронный валидатор, но вы хотите обернуть несколько асинхронных валидаторов в массив:

app.component.ts

import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  AbstractControl
} from '@angular/forms';

import { SignupService } from './signup.service';

@Component({ ... })
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private signupService: SignupService
  ) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: [
        '',
        [Validators.required, Validators.email],
        this.validateEmailNotTaken.bind(this)
      ]
    });
  }

  validateEmailNotTaken(control: AbstractControl) {
    return this.signupService.checkEmailNotTaken(control.value).map(res => {
      return res ? null : { emailTaken: true };
    });
  }
}

Наш валидатор очень похож на обычный пользовательский валидатор.Здесь мы определили наш валидатор в классе компонентов напрямую, а не в отдельном файле.Это облегчает доступ к нашему внедренному экземпляру службы.Обратите также внимание на то, как нам нужно связать значение this, чтобы убедиться, что оно указывает на класс компонента.

Мы также можем определить наш асинхронный валидатор в своем собственном файле, чтобы упростить повторное использование и разделение задач.Единственная сложность - найти способ предоставить экземпляр нашего сервиса.Здесь, например, мы создаем класс, который имеет статический метод createValidator, который принимает наш экземпляр службы и возвращает нашу функцию проверки:

async-email.validator.ts

import { AbstractControl } from '@angular/forms';
import { SignupService } from '../signup.service';

export class ValidateEmailNotTaken {
  static createValidator(signupService: SignupService) {
    return (control: AbstractControl) => {
      return signupService.checkEmailNotTaken(control.value).map(res => {
        return res ? null : { emailTaken: true };
      });
    };
  }
}

Затем, возвращаясь в наш компонент, мы импортируем наш класс ValidateEmailNotTaken и вместо этого можем использовать наш валидатор:

ngOnInit() {
  this.myForm = this.fb.group({
    name: ['', Validators.required],
    email: [
      '',
      [Validators.required, Validators.email],
      ValidateEmailNotTaken.createValidator(this.signupService)
    ]
  });
}

HTML-файл

<form [formGroup]="myForm">
  <input type="text" formControlName="name">
  <input type="email" formControlName="email">

  <div *ngIf="myForm.get('email').status === 'PENDING'">
    Checking...
  </div>
  <div *ngIf="myForm.get('email').status === 'VALID'">
    ? Email is available!
  </div>

  <div *ngIf="myForm.get('email').errors && myForm.get('email').errors.emailTaken">
     this email is already taken!
  </div>
</form>