来自 JSON 的数据未显示在 FormArray 的输入中

Question

我有一个 JSON 并想将此对象的数据输出到 FormArray。我只在输出中显示 Object 对象。解决此问题的最佳方法是什么？在构建代码时我可以做些什么？

我的 StackBlitz：https://stackblitz.com/edit/get-data-from-api-and-populate-form-array-with-it-5kjunq?file=src%2Fapp%2Fapp.component.html

我的代码：

// My JSON
[
  {
    "currentUser": {
      "userId": 2,
      "gender": "Herr",
      "firstname": "Max",
      "lastname": "Mustermann",
      "username": "maxMustermann",
      "email": "max-mustermann@gmail.com"
    },
    "success": true
  }
]

// My TS
 userForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/assets/data.json').subscribe((resp: any[]) => {
      const data = resp;
      if (data && data !== null) {
        console.log('Output', data);
        this.userForm = this.fb.group({
          userFormArray: this.fb.array(
            resp.map((param) => this.generateUserFormGroup(param))
          ),
        });
      }
    });
  }

  private generateUserFormGroup(param) {
    return this.fb.group({
      gender: this.fb.control({ value: param.gender }),
      firstname: this.fb.control({ value: param.firstname }),
      lastname: this.fb.control({ value: param.lastname }),
      username: this.fb.control({ value: param.username }),
      email: this.fb.control({ value: param.email }),
    });
  }

// My Template
<form [formGroup]="userForm">
  <div formArrayName="userFormArray">
    <div
      *ngFor="
        let control of userForm.controls['userFormArray'].controls;
        let i = index
      "
    >
      <div [formGroupName]="i">
        <input type="text" formControlName="gender" />
        <input type="text" formControlName="firstname" />
        <input type="text" formControlName="lastname" />
        <input type="text" formControlName="username" />
        <input type="text" formControlName="email" />
      </div>
    </div>
  </div>
</form>

Answer 1

披露：我不是 Angular 开发人员，我不确定使用 new FormControl 是否会产生后果。

首先，param 是一个对象，它包含另一个名为 currentUser 的对象 - 试图到达无法访问的字段。

我遵循了他们的文档，似乎可以做到 -

  private generateUserFormGroup(param) {
    const { currentUser } = param;
    return this.fb.group({
      gender: new FormControl(currentUser.gender),
      firstname: new FormControl(currentUser.firstname),
      lastname: new FormControl(currentUser.lastname),
      username: new FormControl(currentUser.username),
      email: new FormControl(currentUser.email)
    });
  }
}

Reactive forms Angular docs

Answer 2

FormBuilder control 采用包含默认值和禁用状态或仅包含默认值的对象，因此请像这样更新您的生成表单方法：

private generateUserFormGroup(param) {
 return this.fb.group({
  gender: this.fb.control(param.gender),
  email: this.fb.control({ value: param.email, disabled: false }),
 });
}

在调用此函数的地方，您需要传递 currentUser

this.generateUserFormGroup(data[0].currentUser)

勾选this

来自 JSON 的数据未显示在 FormArray 的输入中

Data from the JSON is not displayed in the inputs of the FormArray

typescript

angular

angular-reactive-forms

formarray