Question

我的表格定义为：

{
  name: [null, Validators.required],
  rows: this.fb.array([])
}

我正在尝试创建一种表单，该表单由一个固定选项卡（包含“名称”表单控件）和每行N个选项卡组成。

使用反应式表单时，我遇到了困难：

<form name="myForm" [formGroup]="myForm" class="editar-form">
    <mat-tab-group>

        <mat-tab label="Main">
            <mat-form-field>
                <input matInput placeholder="Name" formControlName="name" type="text">
            </mat-form-field>

        </mat-tab>

        <mat-tab [label]="'Row ' + (i + 1)" *ngFor="let row of myForm.get('rows').value; let i = index">

**ERROR HERE**  <mat-form-field>
                <input matInput placeholder="Row Id" [formControlName]="'rows[' + i + '].rowId'" type="text">
            </mat-form-field>

        </mat-tab>

    </mat-tab-group>
</form>

我尝试在mat-tab上使用formArrayName，但是失败了-浏览器内存不足，这就是为什么我尝试使用上面的花括号（这也不起作用）的原因。

关于如何实施它的任何想法？

Answer 1

您的FormArray是控件的FormArray还是组的FormArray？

我使用FormGroup的FromArray（myForm）和FormsControls的数组（myForm2）显示代码。 “键”是函数“ rows”，它引用了this.myForm.get（'rows'）。

export class TabGroupBasicExample implements OnInit {
  myForm:FormGroup;
  myForm2:FormGroup;

  get rows()
  {
    return this.myForm?(this.myForm.get('rows') as FormArray).controls:[]
  }
  get rows2()
  {
    return this.myForm?(this.myForm2.get('rows') as FormArray).controls:[]
  }
  constructor(private fb:FormBuilder){}
  ngOnInit()
  {

    this.myForm=this.fb.group({
      name:"Step 1",
      rows:new FormArray([])
    });
    this.myForm2=this.fb.group({
      name:"Step 1",
      rows:new FormArray([])
    });
    this.rows.push(this.fb.group({
      value:3
    }))
    this.rows.push(this.fb.group({
      value:2
    }));
    this.rows2.push(new FormControl('uno'));
    this.rows2.push(new FormControl('dos'));
  }
}

// the .html
<mat-tab-group *ngIf="myForm" >
  <mat-tab [label]="myForm.get('name').value"> Content 1 </mat-tab>
  <mat-tab *ngFor="let control of rows" [label]="control.get('value').value">
      <pre>{{control.value |json}} </pre>
  </mat-tab>
</mat-tab-group>

<mat-tab-group *ngIf="myForm2" >
  <mat-tab [label]="myForm2.get('name').value"> Content 1 </mat-tab>
  <mat-tab *ngFor="let control of rows2" [label]="control.value"> 
    <pre>{{control.value |json}} </pre>
  </mat-tab>
</mat-tab-group>
<pre>{{myForm?.value |json</pre>
<pre>{myForm2?.value |json</pre>

the stackblitz

Angular 2+反应形式-数组问题

1 个答案: