Angular 4 - Form status INVALID, but all fields form control status VALID

Question

I am doing an editing form, after binding the data that comes from the backend, the status of the form is invalid, however all fields are with valid status, how to solve?

    createGerconForm(): FormGroup 
  {
    return this._fb.group({
      anexoGercon: new FormControl(),
      email: new FormControl('', Validators.required),
      name: new FormControl('', Validators.required),
      cpf: new FormControl('', [Validators.required,Validators.pattern(/\d{3}\.\d{3}\.\d{3}\-\d{2}/i)]),
      origem: new FormControl('', Validators.required),
      mes: new FormControl('', Validators.required),
      ano: new FormControl('', Validators.required),
      entradaCt:  new FormControl('', Validators.required),
      prazoDeAtendimento: new FormControl('', Validators.required),
      numeroCT: new FormControl('', Validators.required),
      responsavel: new FormControl('', Validators.required)
    });
  }


bindFormGercon()
  {

    this.email.setValue(this.vm.item.emailRecebido,{onlySelf:true});

    this.name.setValue(this.vm.item.nomeParticipante,{onlySelf:true});


    this.cpf.setValue(this.maskToCPF(this.vm.item.cPF),{onlySelf:true});

    this.ano.setValue(this.vm.item.ano,{onlySelf:true});


    this.entradaCt.setValue(this._dateTimeSvc.covertToDateObject(this.vm.item.entradaCt),{onlySelf:true});


    this.prazoDeAtendimento.setValue(this._dateTimeSvc.covertToDateObject(this.vm.item.prazoAtendimento),{onlySelf:true});


    this.numeroCT.setValue(this.vm.item.numeroCT,{onlySelf:true});


    this.origem.setValue(this.vm.item.origem.id, {onlySelf:true});


    this.responsavel.setValue(this.vm.item.responsavel.id,{onlySelf:true});


    this.mes.setValue(this.vm.item.mes,{onlySelf:true});

  }

Debug status of fields:


   <p>Email: {{emailRecebido.status}}</p> 
   <p>Name:  {{nomeParticipante.status}}</p> 
   <p>Cpf:   {{cpf.status}}</p> 
   <p>Origem: {{origem.status}}</p> 
   <p>Mes:     {{mes.status}}</p> 
   <p>Ano:    {{ano.status}}</p> 
   <p>entradaCT:  {{entradaNoContencioso.status}}</p> 
   <p>prazoDeAtendimento: {{prazoDeAtendimento.status}}</p>
   <p>numeroCT: {{numeroCT.status}}</p>
   <p>Responsavel: {{responsavel.status}}</p>
   <p>Anexo:  {{anexoGercon.status}}</p>
   <p>Form: {{gerconForm.status}}</p>

Result:

Email: VALID

Name: VALID

Cpf: VALID

Origem: VALID

Mes: VALID

Ano: VALID

entradaCT: VALID

prazoDeAtendimento: VALID

numeroCT: VALID

Responsavel: VALID

Anexo: VALID

Form: INVALID

Angular version: 4.2.4 Has anyone ever had this problem?

Maxime Lafarie Maxime Lafarie · Accepted Answer · 2018-04-25T12:36:00

Seems to be a duplicate of Angular 4 button disabled even if the form has valid values

You can use this solution to easily debug your form.

The goal is to debug each form control (e.g. output it into your view) and find which stays invalid.

Angular 4 - Form status INVALID, but all fields form control status VALID

1 Answers