async validator

reactive-form.component.ts

import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.scss']
})
export class ReactiveFormComponent {
  genders = ['male', 'female', 'other']

  hobbies = new FormArray<FormControl<string | null>>([])

  signUpForm = new FormGroup({
    'userData': new FormGroup({
      'username': new FormControl(null, Validators.required),
      'email': new FormControl(null, {
        validators: [Validators.required, Validators.email],
        asyncValidators: [this.uniqueEmailValidator.validate.bind(this.uniqueEmailValidator)]
      })
    }),
    'gender': new FormControl('female'),
    'hobbies': this.hobbies
  })

  get hobbyControls(): Array<FormControl<string | null>> {
    return this.hobbies.controls
  }

  onSubmit() {
    console.log(this.signUpForm)
  }

  onValidation(path: string): boolean {
    return (!this.signUpForm.get(path)?.valid && this.signUpForm.get(path)?.touched) ?? true
  }

  onAddHobby() {
    this.hobbies.push(new FormControl('', [Validators.required]))
  }
}