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);
    }

如果您使用角度8+，则可以使用this.entityForm.get('entity.rows').clear()功能。

感谢所有帮助我检查和捕获错误的人。

Formgroup中的FormArray没有值

2 个答案: