Conditional Validation Angular 2 - Model Driven Forms

Question

I have a form in Angular 2 in which I have a checkbox that changes some input[text] on the page. If the checkbox is checked an input that is called 'CPF' is changed to 'CNPJ'. I need CNPJ to be required only if the checkbox is checked since the user will not even see the 'CNPJ' input if its not checked.

Here's a snippet from the HTML code:

    
  

  
    
       Titular: 
      
         
            
              Titular Inválido (mínimo 3 caracteres).
            
          
            Campo titular obrigatório
          

        
    
    
      
      Pessoa Jurídica
    
    
       CNPJ: 
      
        
          
            CNPJ inválido
          
          
            CNPJ é obrigatório
          

        
    
    
       CPF: 
      
        
          
            CPF inválido
          
          
            CPF é obrigatório
          

        
    
    
       Data de Nascimento: 
      
        
          
            Data de nascimento é obrigatório
          
        
    
    
       Banco: 
      
      
        
         Banco é um campo obrigatório
        
      
    
    
       Agência: 
      
       
         
           Agência é um campo obrigatório
         
       
    
    
       Conta: 
      
       
         
           Conta é um campo obrigatório
         
      
    
    
       Tipo: 
        
       
         
           Tipo é um campo obrigatório

and here's a snippet from the component's code:

  import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { FormBuilder, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule, AbstractControl, ValidatorFn } from '@angular/forms';
import {FinalizaNegociacaoService} from '../services/finaliza-negociacao.service';
import {dadosAcordo} from '../model/dados-acordo.interface';

@Component({
  moduleId: module.id,
  selector: 'detalhes',
  templateUrl: `finaliza-negociacao.component.html`,
  providers: [FinalizaNegociacaoService]
})

    export class FinalizaNegociacaoComponent  {

      public dados:dadosAcordo;
      public formDadosBancarios: FormGroup;

      public submitted: boolean; 
      public events: any[] = []; 
      public servError:any;
      public servSuccess:any;  
      cpf_REGEXP =  /^\d+$/;

      constructor(private _fb: FormBuilder, private finalizaAcordo:FinalizaNegociacaoService) { } 

        ngOnInit() {  
          this.formDadosBancarios = this._fb.group({
            titular: ['', [Validators.required, Validators.minLength(3)]],
            cpf: ['', [Validators.required, Validators.pattern(this.cpf_REGEXP)]], 
            cnpj: ['', [Validators.required, Validators.pattern(this.cpf_REGEXP)]],
            data_nasc: ['', Validators.required],
            agencia: ['', Validators.required ],
            banco: ['', Validators.required],
            conta: ['', Validators.required],
            tipo:  ['', Validators.required],
            id: ['']
          })      
        }
    enviarDados(model: dadosAcordo, isValid: boolean) {
        this.submitted = true; 
        model.id = Math.floor((Math.random()*100));
        if(this.formDadosBancarios.valid){
          console.log("valid form")
         this.finalizaAcordo.enviaDadosBancarios(model)
          .subscribe(
            res => console.log("Sucesso"),
            error => console.log("ERRO")
          );
        }else{
          console.log("invalid form")
        }
      }

Can someone help me? Thanks in advance :)

developer033 · Accepted Answer

You can do the following:

Create a method to handle the changes of your checkbox:

handleType(isJuridica: boolean): void {
  const cpfCtrl: AbstractControl = this.formDadosBancarios.get('cpf');
  const cnpjCtrl: AbstractControl = this.formDadosBancarios.get('cnpj');
  const reqValidators: ValidatorFn[] = [Validators.required, Validators.pattern(this.cpf_REGEXP)];
  const nullValidator: ValidatorFn = Validators.nullValidator;

  // Set validators accordingly
  if (isJuridica) {
    cpfCtrl.setValidators(nullValidator);
    cnpjCtrl.setValidators(reqValidators);
  } else {
    cpfCtrl.setValidators(reqValidators);
    cnpjCtrl.setValidators(nullValidator);
  }

  // Clean values (if you want to)
  cpfCtrl.patchValue('');
  cnpjCtrl.patchValue('');
  cpfCtrl.updateValueAndValidity();
  cnpjCtrl.updateValueAndValidity();
}

Call it in template:

...

Pessoa Jurídica
...

You can check a simple demo below:

PLUNKER

In addition, there is this tutorial which can help you to understand better.

Conditional Validation Angular 2 - Model Driven Forms

Answers (2)

Related Questions