Angular Reactive Forms validation by clicking the button

Question

Hello, I’m trying to create a validation to check if there is already a Cpf in the database (fictional), only that I wanted to change the trigger, instead of triggering the validation on keyup field, I added a boot next to the field and clicking on the button would like the validation to be performed and mark the field with red if you have the user or mark green if you do not have.

Note: I am using the material angular Stepper with a form for each step, but for the example here I will show only 1 form with 1 field that is what I want to validate.

Basically the code was as follows:

Component.

this.cpfForm = this._formBuilder.group(
      {
        cpf: ['', Validators.required, [this.verificarCPF.bind(this)]]
      }
    );

verificarCPF(form: FormControl) {

    return this.signatureService.getUsersbyKey(form.value)
      .pipe(
        map( cpfExiste => cpfExiste ? { exists: true } : null)
      );
  }

Signature.service.ts

getUsersbyKey(cpf: string) {
    return this.http.get('assets/dbteste/usuarios.json')
      .pipe(
        map((dados: { usuarios: any[] }) => dados.usuarios),
        // tap(console.log),
        map((dados: { cpf: string }[]) => dados.filter(x => x.cpf === cpf)),
        map((dados: any[]) => dados.length > 0)  //retorna true ou false
        //tap(console.log)
      );
  }

Assets/dbteste/usuarios.json

{
    "usuarios": [{
            "id": 1,
            "nome": "renan",
            "email": "[email protected]",
            "cpf": "08368"
        },
        {
            "id": 2,
            "nome": "renan2",
            "email": "[email protected]",
            "cpf": "08369"
        },
        {
            "id": 3,
            "nome": "renan3",
            "email": "[email protected]",
            "cpf": "08360"
        }
    ]
}

Component.html

<mat-horizontal-stepper [@.disabled]="true" #stepper>
    <mat-step label="Informações Pessoais" [stepControl]="cpfForm">
      <form [formGroup]="cpfForm">
        <mat-form-field>
          <mat-label>CPF</mat-label>
          <input matInput placeholder="CPF " formControlName="cpf" #cpf>
        </mat-form-field>
        <button 
  matTooltip="Verificar se ja existe  o CPF informado" 
  (click)="verificarCPF(cpf.value)" 
  class="ml-2 w-25" mat-raised-button color="primary">Verificar CPF </button>
        <div 
  *ngIf="cpfForm.get('cpf').hasError('exists') && cpfForm.get('cpf').touched" 
  class="invalid-feedback">
          CPF JA CADASTRADO!
        </div>

        <div>
          <button mat-button matStepperNext> Proximo </button>
        </div>
      </form>
    </mat-step>

... mais steps e formularios

And the result of all this is, a validation to each number typed

::::[[UPDATE]]::::

I managed to set the error manually I think unorthodox (), but now another problem has arisen, the field gets the focus on the button, and to update the error status in the field, I have to click the input again :(

Component.

verificarCPF() {
const valor = this.cpfForm.get('cpf').value;
console.log(valor);
return this.signatureService.getUsersbyKey(valor)
  .pipe(
    map(cpfExiste => cpfExiste ? this.cpfForm.controls['cpf'].setErrors({'exists': true}) : null),
  ).subscribe();

}

Answer 1

For those who want to see the solution, follow the link in the stackblitz.

https://stackblitz.com/edit/renanduart3angular-validacao-botao?file=src%2Fapp%2Fhello.component.ts