ngOnInit() {

    this.signUpForm = this.formBuilder.group({
      email: ['',
        [
          Validators.required,
          Validators.email
        ]
      ],

      fullName: ['',
        [
          Validators.required,
          Validators.minLength(2),
          Validators.maxLength(40)
        ]
      ],
      userName: [
        '',
        [
            Validators.required,
            lowerCaseValidator,
            Validators.minLength(2),
            Validators.maxLength(30)
        ],
        this.userNotTaken.checkUserNameTaken()
      ],

      password: ['',
        [
          Validators.required,
          Validators.minLength(8),
          Validators.maxLength(14)
        ]
      ]
    });
  }

 checkUserNameTaken() {
        return (control: AbstractControl) => {
            control.valueChanges.pipe(
                debounceTime(300)
            ).pipe(
                switchMap( userName => this.signUpService.checkUserNameTaken(userName) )
            ).pipe(
                map( taken => taken ? {userNameTaken: true} : null)
            ).pipe(
                first()
            );
        };
    }