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

I am doing an editing form. Ater binding the data that comes from the backend, the status of the form is invalid. However, all fields are with valid status. How can this be solved?

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? How can this be solved?

Continue reading...