Angular Reactive窗体的formArrays未按预期进行绑定

Question

响应式表单控件无法排序。 从Google地方信息自动填充功能收到的地方信息保存在数组中，然后更改了它在数组中的顺序。 当我控制台日志时，我看到数组已更改顺序，但未绑定到UI。 在stackblitz中添加了代码。

产生错误的步骤：

1. 添加三个地址（自动填充）和密码

2. 然后单击排序地址按钮。 现在，您每次单击“排序地址”按钮时，密码都会更改，但地址不会更改

这是关于stackblitz的代码：

ngOnInit() {
    this.myForm = this._fb.group({
        name: ['', [Validators.required, Validators.minLength(5)]],
        addresses: this._fb.array([
            this.initAddress(),
        ])
    });
}

sortAddress() {
    const B = [2, 1, 0];
    this.myForm.get('addresses').setValue(B.map((entry) => 
        this.myForm.get('addresses').value[entry]));
}

initAddress() {
    return this._fb.group({
        street: ['', Validators.required],
        postcode: ['']
    });
}

addAddress() {
    const control = <FormArray>this.myForm.controls['addresses'];
    control.push(this.initAddress());
}

Answer 1

尝试为您的writeValue()函数添加值修改：

public writeValue(value: any) {
  if (!value || value === null) {
    this.resetLocation();
    // this.updatePhotoComponent(value);
  }
  // this line actually writes changed value into its input box
  else {
    this.renderer.setProperty(this.location.nativeElement, 'value', value.address);
  }
}

更新的STACKBLITZ： https ://stackblitz.com/edit/angular-reactive-forms-eqve8a ? file = app/google-place.component.ts