Angular 7 - Input validation in a dynamic form

Question

I made a form where the fields (input) appear according to the category to be created. The category is chosen when the user clicks on it, opening a new pro form tab.

In the form, you have fields with validation. I use formBuilder to validate each input (I left it in a field just to give the example).

If I change the code it’s like this:

this.fiscalForm = this.formBuilder.group({
      id_fiscal: [null],
      codigo_empresa: [null],
      nome_empresa: [null],
      cnpj: [null],
      cpf: [null],
      ie: [null],
      im: [null],
      socio_responsavel: [null],
      contador: [null],
      municipio: [null],
      uf: [null],
      login: [null],
      senha: [null, Validators.required],
      site: [null],
      observacao: [null],
    });

For that reason:

this.fiscalForm = this.formBuilder.group({
      id_fiscal: [null],
      codigo_empresa: [null, Validators.required],
      nome_empresa: [null, Validators.required],
      cnpj: [null, Validators.required],
      cpf: [null, Validators.required],
      ie: [null, Validators.required],
      im: [null, Validators.required],
      socio_responsavel: [null, Validators.required],
      contador: [null, Validators.required],
      municipio: [null, Validators.required],
      uf: [null, Validators.required],
      login: [null, Validators.required],
      senha: [null, Validators.required],
      site: [null, Validators.required],
      observacao: [null, Validators.required],
    });

Then the form is invalid, because it understands that "there are" mandatory fields.

Have some way to remove or add validation, as the input’s that appear in the form?

Component Code:

<a (click)="goBack()" class="btn btn-warning btn-md m-3">
  <span class="glyphicon glyphicon-backward"></span> &lt;&lt; Voltar
</a>
<div class="m-5">
    <h3>{{ pageTitle }}</h3>

</div>

<form class="m-5" [formGroup]="fiscalForm" (submit)="onSubmit()">
  <div class="form-row" *ngIf="tipo_tabela == 'casn' || tipo_tabela == 'sefaz'">
    <div class="form-group col-md-5">
      <label for="codigo_empresa">Código da Empresa</label>
      <input type="text" class="form-control" id="codigo_empresa" formControlName="codigo_empresa">
      <div class="small" *ngIf="!fiscalForm.controls['codigo_empresa'].valid && fiscalForm.controls['codigo_empresa'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'casn' || tipo_tabela == 'ibge' || tipo_tabela == 'nfgaucha' || tipo_tabela == 'sefaz' || tipo_tabela == 'prefeitura' || tipo_tabela == 'nfse'">
    <div class="form-group col-md-5">
      <label for="nome_empresa">Nome da Empresa</label>
      <input type="text" class="form-control" id="nome_empresa" formControlName="nome_empresa">
      <div class="small" *ngIf="!fiscalForm.controls['nome_empresa'].valid && fiscalForm.controls['nome_empresa'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'casn' || tipo_tabela == 'ibge' || tipo_tabela == 'nfgaucha'">
    <div class="form-group col-md-5">
      <label for="cnpj">CNPJ</label>
      <input type="text" class="form-control" id="cnpj" formControlName="cnpj">
      <div class="small" *ngIf="!fiscalForm.controls['cnpj'].valid && fiscalForm.controls['cnpj'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'casn' || tipo_tabela == 'sefaz' || tipo_tabela == 'prefeitura'">
    <div class="form-group col-md-5">
      <label for="cpf">CPF</label>
      <input type="text" class="form-control" id="cpf" formControlName="cpf">
      <div class="small" *ngIf="!fiscalForm.controls['cpf'].valid && fiscalForm.controls['cpf'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'nfgaucha' || tipo_tabela == 'sefaz'">
    <div class="form-group col-md-5">
      <label for="ie">Inscrição Estadual</label>
      <input type="text" class="form-control" id="ie" formControlName="ie">
      <div class="small" *ngIf="!fiscalForm.controls['ie'].valid && fiscalForm.controls['ie'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'prefeitura'">
    <div class="form-group col-md-5">
      <label for="im">Inscrição Municipal</label>
      <input type="text" class="form-control" id="im" formControlName="im">
      <div class="small" *ngIf="!fiscalForm.controls['im'].valid && fiscalForm.controls['im'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'sefaz'">
    <div class="form-group col-md-5">
      <label for="socio_responsavel">Sócio Responsável</label>
      <input type="text" class="form-control" id="socio_responsavel" formControlName="socio_responsavel">
      <div class="small" *ngIf="!fiscalForm.controls['socio_responsavel'].valid && fiscalForm.controls['socio_responsavel'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'aaa'">
    <div class="form-group col-md-5">
      <label for="contador">Contador</label>
      <input type="text" class="form-control" id="contador" formControlName="contador">
      <div class="small" *ngIf="!fiscalForm.controls['contador'].valid && fiscalForm.controls['contador'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'prefeitura' || tipo_tabela == 'nfse'">
    <div class="form-group col-md-5">
      <label for="municipio">Município</label>
      <input type="text" class="form-control" id="municipio" formControlName="municipio">
      <div class="small" *ngIf="!fiscalForm.controls['municipio'].valid && fiscalForm.controls['municipio'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'sefaz' ">
    <div class="form-group col-md-5">
      <label for="uf">UF</label>
      <input type="text" class="form-control" id="uf" formControlName="uf">
      <div class="small" *ngIf="!fiscalForm.controls['uf'].valid && fiscalForm.controls['uf'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'nfse' ">
    <div class="form-group col-md-5">
      <label for="login">Login</label>
      <input type="text" class="form-control" id="login" formControlName="login">
      <div class="small" *ngIf="!fiscalForm.controls['login'].valid && fiscalForm.controls['login'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" >
    <div class="form-group col-md-5">
      <label for="senha">Senha</label>
      <input type="text" class="form-control" id="nome_modulo" formControlName="senha">
      <div class="small" *ngIf="!fiscalForm.controls['senha'].valid && fiscalForm.controls['senha'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'nfse' ">
    <div class="form-group col-md-5">
      <label for="site">Site</label>
      <input type="text" class="form-control" id="site" formControlName="site">
      <div class="small" *ngIf="!fiscalForm.controls['site'].valid && fiscalForm.controls['site'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row" *ngIf="tipo_tabela == 'prefeitura' ">
    <div class="form-group col-md-5">
      <label for="observacao">Observações</label>
      <input type="text" class="form-control" id="observacao" formControlName="observacao">
      <div class="small" *ngIf="!fiscalForm.controls['observacao'].valid && fiscalForm.controls['observacao'].touched"> O Nome do Módulo não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-12">
        <button [disabled]="!fiscalForm.valid" type="submit" class="btn btn-success btn-lg float-right mt-3 mb-4">Salvar</button>
    </div>
  </div>

</form>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { Location } from '@angular/common';

import { Fiscal } from '../../../interface/fiscal';
import { FiscalService } from '../../../service/fiscal.service';

@Component({
  selector: 'app-fiscal-form',
  templateUrl: './fiscal-form.component.html',
  styleUrls: ['./fiscal-form.component.css']
})
export class FiscalFormComponent implements OnInit {

  fiscal: Fiscal;
  id_fiscal: any;
  currentAction: string;
  pageTitle: string;
  fiscalForm: FormGroup;
  tipo_tabela: string;

  constructor(
    private fiscalService: FiscalService,
    private router: Router,
    private route: ActivatedRoute,
    private formBuilder: FormBuilder,
    private location: Location
  ) { }

  ngOnInit() {
    this.setCurrentAction();

    this.fiscalForm = this.formBuilder.group({
      id_fiscal: [null],
      codigo_empresa: [null, Validators.required],
      nome_empresa: [null, Validators.required],
      cnpj: [null, Validators.required],
      cpf: [null, Validators.required],
      ie: [null, Validators.required],
      im: [null, Validators.required],
      socio_responsavel: [null, Validators.required],
      contador: [null, Validators.required],
      municipio: [null, Validators.required],
      uf: [null, Validators.required],
      login: [null, Validators.required],
      senha: [null, Validators.required],
      site: [null, Validators.required],
      observacao: [null, Validators.required],
    });

    this.loadPage();
  }

  private setCurrentAction() {
    if(this.route.snapshot.url[0].path == 'new') {
      this.currentAction = 'new';
      this.tipo_tabela = this.route.snapshot.url[1].path;

      if(this.route.snapshot.url[1].path == 'municipios'){
        this.pageTitle = 'Criar cadastro (Municípios)';
      } else if(this.route.snapshot.url[1].path == 'estados'){
        this.pageTitle = 'Criar cadastro (Estados)';
      } else if(this.route.snapshot.url[1].path == 'casn'){
        this.pageTitle = 'Criar cadastro (Código Acesso Simples Nacional)';
      } else if(this.route.snapshot.url[1].path == 'ibge'){
        this.pageTitle = 'Criar cadastro (IBGE)';
      } else if(this.route.snapshot.url[1].path == 'nfgaucha'){
        this.pageTitle = 'Criar cadastro (NF Gaúcha)';
      } else if(this.route.snapshot.url[1].path == 'sefaz'){
        this.pageTitle = 'Criar cadastro (SEFAZ)';
      } else if(this.route.snapshot.url[1].path == 'parcelamentos'){
        this.pageTitle = 'Criar cadastro (Parcelamentos)';
      } else if(this.route.snapshot.url[1].path == 'prefeitura'){
        this.pageTitle = 'Criar cadastro (Prefeitura)';
      } else if(this.route.snapshot.url[1].path == 'nfse'){
        this.pageTitle = 'Criar cadastro (NFS-e)';
      } else if(this.route.snapshot.url[1].path == 'grupomacengenharia'){
        this.pageTitle = 'Criar cadastro (Grupo MAC Engenharia)';
      } else {
        this.pageTitle = 'Page Not Found 404';
      }
    } else {
      this.currentAction = 'edit';
      this.id_fiscal = this.route.snapshot.url[0].path;
      this.tipo_tabela = this.route.snapshot.url[2].path;

      if(this.route.snapshot.url[2].path == 'municipios'){
        this.pageTitle = 'Editar cadastro (Municípios)';
      } else if(this.route.snapshot.url[2].path == 'estados'){
        this.pageTitle = 'Editar cadastro (Estados)';
      } else if(this.route.snapshot.url[2].path == 'casn'){
        this.pageTitle = 'Editar cadastro (Código Acesso Simples Nacional)';
      } else if(this.route.snapshot.url[2].path == 'ibge'){
        this.pageTitle = 'Editar cadastro (IBGE)';
      } else if(this.route.snapshot.url[2].path == 'nfgaucha'){
        this.pageTitle = 'Editar cadastro (NF Gaúcha)';
      } else if(this.route.snapshot.url[2].path == 'sefaz'){
        this.pageTitle = 'Editar cadastro (SEFAZ)';
      } else if(this.route.snapshot.url[2].path == 'parcelamentos'){
        this.pageTitle = 'Editar cadastro (Parcelamentos)';
      } else if(this.route.snapshot.url[2].path == 'prefeitura'){
        this.pageTitle = 'Editar cadastro (Prefeitura)';
      } else if(this.route.snapshot.url[2].path == 'nfse'){
        this.pageTitle = 'Editar cadastro (NFS-e)';
      } else if(this.route.snapshot.url[2].path == 'grupomacengenharia'){
        this.pageTitle = 'Editar cadastro (Grupo MAC Engenharia)';
      } else {
        this.pageTitle = 'Page Not Found 404';
      }
    }
  }
  private loadPage() {
    if(this.currentAction == 'edit') {
      this.fiscalService.getId(this.id_fiscal).subscribe(
        (fiscal) => {this.updateForm(fiscal); }
      );
    }
  }
  private updateForm(item) {
    this.fiscalForm.patchValue({
      id_fiscal: item.id_fiscal,
      codigo_empresa: item.codigo_empresa,
      nome_empresa: item.nome_empresa,
      cnpj: item.cnpj,
      cpf: item.cpf,
      ie: item.ie,
      im: item.im,
      socio_responsavel: item.socio_responsavel,
      contador: item.contador,
      municipio: item.municipio,
      uf: item.uf,
      login: item.login,
      senha: item.senha,
      site: item.site,
      observacao: item.observacao,
    });
  }
  goBack() {
    this.location.back();
  }
}

Answer 1

The error occurs because all fields are required, that is, the fields that are not displayed will be validated, you can make use of setValidators to generate the validations, for example:

...

      if(this.route.snapshot.url[1].path == 'municipios'){
        this.pageTitle = 'Criar cadastro (Municípios)';
        this.addFormValidators(['senha', 'municipio']);
      }

...


  addFormValidators(listaCampos = []) {
      listaCampos.forEach(campo => {
          this.fiscalForm.get(campo).setValidators([Validators.required]);
      });
  }

...

I added the addFormValidators function that gets the name of the fields that must be validated by the form. The correct thing would be to make different images for each situation, however, the refactoring would be enormous. You can implement this code if you find it easier.

Using only one form with multiple Fis makes understanding and implementation difficult.