Angular 4 - 表单状态为INVALID，但所有字段都形成控制状态VALID

Question

我正在编辑表单，在绑定来自后端的数据后，表单状态无效，但是所有字段都是有效状态，如何解决？

＆＃13;

＆＃13;

    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

＆＃13;

＆＃13;

＆＃13;

Angular版本：4.2.4 有没有人遇到过这个问题？

Answer 1

似乎是Angular 4 button disabled even if the form has valid values

的副本

您可以使用this solution轻松调试表单。

目标是调试每个表单控件（例如将其输出到您的视图中）并查找哪些表单无效。