Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Erro no formulário

Após aplicar todas as alterações do validador assíncrono o navegador passou a apresentar o erro:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[UserNotTakenValidatorService -> UserNotTakenValidatorService -> UserNotTakenValidatorService]: 
  NullInjectorError: No provider for UserNotTakenValidatorService!
NullInjectorError: R3InjectorError(AppModule)[UserNotTakenValidatorService -> UserNotTakenValidatorService -> UserNotTakenValidatorService]: 
  NullInjectorError: No provider for UserNotTakenValidatorService!

Seguem classes:

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

import { lowerCaseValidator } from 'src/app/shared/validators/lower-case.validator';
import { UserNotTakenValidatorService } from './user-not-taken.validator.service';

@Component({
  templateUrl: './signup.component.html',
})
export class SignUpComponent implements OnInit {

  signupForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
            private userNotTakenValidationService: UserNotTakenValidatorService) { }

  ngOnInit(): void {
    this.signupForm = this.formBuilder.group({
        email: [
            '',
            [
                Validators.required,
                Validators.email
            ]
        ],
        fullName: [
            '',
            [
                Validators.required,
                Validators.minLength(2),
                Validators.maxLength(40)
            ]
        ],
        userName: [
            '',
            [
                Validators.required,
                //Validators.pattern(/^[a-z]+[0-9]*$/),
                lowerCaseValidator,
                Validators.minLength(2),
                Validators.maxLength(30)
            ],
            this.userNotTakenValidationService.checkUserNameTaken()
        ],
        password: [
            '',
            [
                Validators.required,
                Validators.minLength(8),
                Validators.maxLength(14)
            ]
        ]
      });
  }

}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const API_URL: string = 'http://localhost:3000'; 

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

    constructor(private http: HttpClient) {}

    checkUserNameTaken(userName: string) {
        return this.http.get(API_URL + '/user/exists' + userName);
    }
}
import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { debounceTime, switchMap, map, first } from 'rxjs/operators';

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

Injectable({ providedIn: 'root' })
export class UserNotTakenValidatorService {

    constructor(private signUpService: SignUpService) { }

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

Já revisei o código mas não consigo encontrar o erro! Estou certo que esqueci alguma coisa!

1 resposta
solução!

Favor desconsiderar, encontrei o erro! Esqueci de colocar o '@' em Injectable

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

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software