如何在没有* ngFor的情况下引用FormArray内的FormGroup:我遇到了错误

时间:2019-01-24 20:16:31

标签: angular angular6

我在FormArray中有2个FormGroup

setRubricaDosForm: FormGroup;

ngOnInit() {
  this.setRubricaDosForm = this.fb.group({
    rubrica: this.fb.array([
      this.fb.group({
        nombreUno: ["", Validators.required],
        puntajeUno: [
          "",
          [Validators.required, Validators.pattern("/^-?(0|[1-9]d*)?$/")]
        ]
      }),
      this.fb.group({
        nombreDos: ["", Validators.required],
        puntajeDos: [0]
      })
    ])
  });

}

//a getter for the array controls
get rubrica(){
  return this.setRubricaDosForm.get('rubrica') as FormArray;
}

然后在我的模板中我有这个。

<form [formGroup]="setRubricaDosForm" novalidate (ngSubmit)="submit()">
  <div formArrayName="rubrica">
    //here i've also tried formGroupName="setRubricasDosForm.controls[0].get('rubrica').controls[0]
    <div [formGroupName]="rubrica.controls[0]"> 
      <input formControlName="nombreUno">
      <input formControlName="puntajeUno">
    </div>
    <div [formGroupName]="rubrica.controls[1]"> 
      <input formControlName="nombreDos">
      <input formControlName="puntajeDos">
    </div>
  </div>
</form>

我得到ERROR Error: Cannot find control with path: 'rubrica -> [object Object]'

通过评论的方式,我得到了there's no get method

我不使用* ngFor,因为我只需要那两个FormGroup,并且我想将它们放入FormArray中,所以我没有尝试从一开始就声明两个不同的FormGroup(除非没有这样的方法,否则我想这样做)的方式)。

致谢

1 个答案:

答案 0 :(得分:2)

您直接使用rubrica.controls[0]引用FormGroup,因此使用[formGroup]而不是[formGroupName],它应该像超级按钮一样工作。

结果

<form [formGroup]="setRubricaDosForm" novalidate (ngSubmit)="submit()">
  <div formArrayName="rubrica">
    <div [formGroup]="rubrica.controls[0]"> 
      <input formControlName="nombreUno">
      <input formControlName="puntajeUno">
    </div>
    <div [formGroup]="rubrica.controls[1]"> 
      <input formControlName="nombreDos">
      <input formControlName="puntajeDos">
    </div>
  </div>
</form>