Angular FormGroup

Ainda tem muita gente que não conhece esse recurso de validação no angular e ainda usar Jquey para fazer validações. Então vou colocar aqui um passo a passo desse recurso basilar do angular disponível desde a versão 2.0

A documentação do angular diz o seguinte :

A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the status values of its children. For example, if one of the controls in a group is invalid, the entire group becomes invalid.

FormGroup is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormArray.

When instantiating a FormGroup, pass in a collection of child controls as the first argument. The key for each child registers the name for the control.

Resumindo , ele associa o html com o Ts relacionando cada controle com um FormControl em um array de controles e ai controla o estado do grupo, vamos fazer;

Primeiro vamos cria uma variável do Formgroup e colocar os campos do formulário nela conforme abaixo;

private _form: FormGroup;
constructor() {
 this._form = {
  name: new FormControl(),
 }
}

no html vamos fazer o seguinte ;

<form (ngSubmit)="onSave(_model)" novalidate>
 <div class="card-body">
   <div class="row " [formGroup]="_form">
    <section class="col-md-12"  >
   <div class='form-group'>
     <label>Name</label>
     <input type='text' (ngModel)]='_model.name' name='name' required formControlName='name'/>
   </div>
    </section>
    </div>
 </div>
 <div class="card-footer">
   <button class="btn btn-default" type="button" (click)="onCancel()">
  <i class="icon-close icons"></i>
  Cancelar
   </button>
   <button type="submit" class="btn btn-success"[disabled]="_form.invalid">
  <i class="icon-check icons"></i>
  Salvar
   </button>
 </div>
</form>

Observe que o campo esta envolto em uma div com o atributo [formGroup], e o campo submit usa o estado da propriedade “invalid” da variável _form criada acima, assim podemos identificar se o formulário foi preenchido ou não. Usamos o atributo “disabled” associando o estado do “invalid” para habilitar o botão e fazer o processo de salvar.

Get Wilson Santos’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

o resultado é

Aqui estou usando um modal e alem disso tem um CSS que é aplicado ng-invalid gerado pelo Formgroup

Ao digitar algo no campos temos

perceba que o botão esta habilitado agora

e alem disso podemos fazer mais uma coisa;

<p *ngIf="_form.controls?.name?.errors?.required" class="text-danger">Campo Requerido</p>

observe que podemos acessar uma coleção de controles form group e assim podemos de forma individual dar uma mensagem referente a qual o problema desse campo, veja abaixo;

Caso queiram um exemplo completo e funcionando siga o passo do meu SEED, com ele você conseguira criar uma estrutura completa e funcional de um sistema com backend usando uma api rest .net core 2.2 e um front SPA com angular 8, veja mais aqui;

Gerador Foque no Domínio

Gerador de Código

Abraços