FormValidateDirective

Descrição

FormValidateDirective é uma diretiva Angular que automatiza e simplifica a validação de formulários. Ela não apenas valida campos do formulário em tempo real, mas também oferece feedback visual para indicar quais campos são inválidos. Além disso, ela se integra com serviços de validação personalizados para uma maior flexibilidade.

Outputs

formChanged: EventEmitter<boolean>

Este evento é emitido cada vez que o estado de validade do formulário muda. Ele retorna um valor booleano que indica se o formulário é válido (true) ou inválido (false).

Métodos Públicos

isValid(): boolean

Este método pode ser chamado para verificar manualmente a validade do formulário. Ele retorna um valor booleano que indica a validade do formulário.

Como Usar

Injeção de Dependência

Para usar esta diretiva, você deve injetar o serviço FormValidateService em seu componente.

constructor(private formValidateService: FormValidateService) {}

Componente TypeScript

import { FormValidateService } from 'path-to-form-validate-service';
...
constructor(private formValidateService: FormValidateService) {}

ngOnInit() {
  this.formValidateService.onCheck().subscribe(() => {
    // Atualizar a validade do formulário ou outras ações
  });
}

Template HTML

Aplicar a diretiva ao seu formulário é simples. Basta adicionar o atributo formAutoValidate ao elemento do formulário.

<form formAutoValidate>
  <!-- Seus campos de formulário aqui -->
</form>

Eventos

Você pode escutar o evento formChanged para executar ações com base na validade do formulário.

<form formAutoValidate (formChanged)="handleFormChanged($event)">
  <!-- Seus campos de formulário aqui -->
</form>

Exemplo Completo

// app.component.ts

import { Component } from '@angular/core';
import { FormValidateService } from './form-validate.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private formValidateService: FormValidateService) {}

  handleFormChanged(isValid: boolean) {
    if (isValid) {
      // Execute sua lógica para um formulário válido aqui
    } else {
      // Execute sua lógica para um formulário inválido aqui
    }
  }
}

<!-- app.component.html -->
<form formAutoValidate (formChanged)="handleFormChanged($event)">
  <!-- Seus campos de formulário aqui -->
</form>

Com a diretiva FormValidateDirective, a validação de formulários se torna um processo muito mais simples e eficiente, permitindo que você foque na lógica de negócios de sua aplicação.