Formgroup 中没有 FormArray 的值

Question

我有一个这样定义的表单：

this.entityForm = this.fb.group({
        // Searching ID
        search: this.fb.group({
            procedures: '',
            areas: '',
            entities: '',
            versions: '',
        }),
        // Entity
        entity: this.fb.group({
            // Id
            name: '',
            version: '',
            // Data Source
            cobolFileName: '',
            cobolUri: '',
            hostDbUri: '',
            hostDbTable: '',    // Format (schema.table)
            wsUri: '',
            // Historice
            historicizeStrategy: '',
            pwx: '',
            // Rows
            rows: this.fb.array([this.newRow()])
        })
    });

当我这样做时：

let a = this.entityForm.get('entity');
    let b = this.entityForm.get('entity.rows');
    console.log(a.value);
    console.log(b.value);

答案是：

{
cobolFileName: "NAME OF FILE"
cobolUri: "mainframe"
historicizeStrategy: "START_END_VALIDITY"
hostDbTable: null
hostDbUri: null
name: "GRZ_PERS"
pwx: false
rows: Array(0)
length: 0
__proto__: Array(0)
version: 1
wsUri: null
__proto__: Object
}

{
    0: {name: "Column_2", datatype: "INTEGER", defaultValue: "", key: false, masked: true, …}
    1: {name: "Column_1", datatype: "INTEGER", defaultValue: "", key: false, masked: true, …}
    length: 2
    __proto__: Array(0)
}

我想将 a.value 发送到后端，但是对于某些行数组长度为 0 但数组已满，我们如何在第二个 console.log 中看到？

谢谢

Answer 1

entity.rows 是一个FormBuilder.array，这就是为什么你得到一个有一个数组的对象——这正是你做console.log(b.value)时返回的内容；在下面的演示代码中，您可以向该数组添加更多行并查看打印在屏幕上的值。

相关TS：

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  entityForm;

  constructor(private fb: FormBuilder) {
    this.entityForm = this.fb.group({
      // Searching ID
      search: this.fb.group({
        procedures: '',
        areas: '',
        entities: '',
        versions: '',
      }),
      // Entity
      entity: this.fb.group({
        // Id
        name: '',
        version: '',
        // Data Source
        cobolFileName: '',
        cobolUri: '',
        hostDbUri: '',
        hostDbTable: '',    // Format (schema.table)
        wsUri: '',
        // Historice
        historicizeStrategy: '',
        pwx: '',
        // Rows
        rows: this.fb.array([
          this.fb.control({ name: '', datatype: '', defaultValue: '', key: '', masked: '', size: '', pwx: '' })
        ])
      })
    });
  }

  ngOnInit() {
    this.printStatus();
  }

  /*
    newRow(): FormGroup {
      return this.fb.control({ name: '', datatype: '', defaultValue: '', key: '', masked: '', size: '', pwx: '' });
    }
  */

  get rows() {
    return this.entityForm.get('entity.rows') as FormArray;
  }

  insertRow() {
    this.rows.push(
      this.fb.control({ name: '', datatype: '', defaultValue: '', key: '', masked: '', size: '', pwx: '' })
    );
    this.printStatus();
  }

  printStatus() {
    let a = this.entityForm.get('entity');
    let b = this.entityForm.get('entity.rows');
    console.log("entityForm.get('entity'):", a.value);
    console.log("entityForm.get('entity.rows'):", b.value);
  }

}

相关HTML：

<button (click)='insertRow()'> insert a row </button> 
<br/>

{{ entityForm.value | json }}

<hr/>

<ul *ngFor='let item of entityForm?.value?.entity?.rows; let i = index'>
  <li>#{{i}} - [{{item.name}}] - [{{item.datatype}}]  - [{{item.key}}]  - [{{item.size}}] </li>
</ul>

完成working stackblitz here

Answer 2

我发现问题： 当我加载来自后端的信息时，我清除 FormArray 创建一个新的：

this.entityForm['controls'].entity['controls'].rows =this.fb.array([]);

对于一些我不知道这不起作用并创建取决于如何访问的并行数组检索数据或新的空数组。 要解决，请像这样清除数组：

let rows2BeCleaned = (<FormArray>this.entityForm.get('entity.rows'));
while(rows2BeCleaned.length !=0){
    rows2BeCleaned.removeAt(0);
    }

如果你使用 angular 8+，你可以使用 this.entityForm.get('entity.rows').clear() 函数。

感谢所有帮助我审查和发现错误的人。