Angular 4 - 表单状态无效，但所有字段表单控制状态有效

Question

我在做一个编辑表单，绑定(bind)后端来的数据后，表单的状态是无效的，但是所有的字段都是有效的状态，如何解决？

    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 版本:4.2.4
有没有人遇到过这个问题？

Answer 1

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

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

目标是调试每个表单控件(例如，将其输出到您的 View 中)并找出哪些仍然无效。