Angular2 patchValue JSON 数据到formArray

Question

我有这样的 Json 数据：

assets/details.json

{
    "name" : "john",
    "age"  : 20,
    "address" : [{
        "main": "address1",
        "sub": "address2"
    },
    {
        "main": "add1",
        "sub": "add2"
    }]
}

我想用patchValue.

我试过这个。

app.component.ts

{
    "name" : "john",
    "age"  : 20,
    "address" : [{
        "main": "address1",
        "sub": "address2"
    },
    {
        "main": "add1",
        "sub": "add2"
    }]
}

我的 HTML 页面是这样设计的： app.component.html

export class AppComponent {
  data: FormGroup

  constructor(private FB: FormBuilder, private service: DataService) { }

  ngOnInit() {
    this.data = this.FB.group({
      name: [''],
      age: [''],
      address: this.FB.array([
        this.addAddress()
      ])
    })

    this.getData()

  }

  addAddress(): FormGroup {
    return this.FB.group({
      main: [''],
      sub: [''],
    })
  }

  getData() {
    this.service.getData('../assets/details.json').subscribe((data) => {
      this.data.patchValue({ data })
    }
}

但没有什么像我预期的那样工作。没有什么可以填写表格。我不知道下一步该怎么做。

如何在表单字段中获取所有这些 JSON 数据？

Answer 1

patchValue只更新现有的FormArray，它不会修改你的FormArray. FormArray在打补丁之前，您必须确保您的尺寸正确，您也可以完全重新创建它，如下所示：

this.data.patchValue({ name: data.name, age: data.age });

this.data.controls['address'] = this.FB.array(data.map(address => {
    const group = this.addAddress();
    group.patchValue(address);
    return group ;
}));

有关更多详细信息，请参阅此帖子。

Answer 2

如果您的表单中没有 a FormArray，则可以只使用this.data.patchValue(data)（或者setValue如果所有属性都匹配），但由于您有一个 formarray，因此您需要address在对象中迭代数组并将 formgroup 推送到 formarray。另外，我认为在构建表单时不需要最初创建一个空的表单组，所以我将其省略了：

ngOnInit() {
  this.data = this.FB.group({
    name: [''],
    age: [''],
    address: this.FB.array([])
  })
}

get formArr() {
  return this.data.get('address') as FormArray;
}

// ....
this.data.patchValue({name: data.name, age: data.age});
data.address.forEach((x) => {
  this.formArr.push(this.FB.group(x))
});