angular 对象数组的反应式表单控制问题

Question

这是我的 JSON

[{
"id": 138,
"first_name": "John",
"last_name": "Doe",
"phone": [{
    "label": "home",
    "value": 546345
}, {
    "label": "wife",
    "value": 63456345
}]
}]

当我点击编辑显示输入字段时，我需要制作编辑表单。我让一切正常工作，但是对于 phone 数字我遇到了问题，我无法为 contact_phone 中的所有对象获取输入，只能为第一个对象输入。

这是我的部分代码

<div formArrayName="phone">
        <div *ngFor="let number of phoneFormGroup.controls; let i = index">
          <div [formGroupName]="i" class="row">
            <div class="col-xl-5 col-md-5 col-sm-12 col-12">
              <input formControlName="value" type="number" placeholder="Number" />
            </div>
            <div class="col-xl-5 col-md-5 col-sm-12 col-10">
              <input formControlName="label" type="text" placeholder="Label" />
            </div>
            <div class="col-xl-2 col-md-2 col-sm-12 col-2 newContactInputTitle">
              <div class="removeNumber" (click)="removeNumber(i)"><i class="fa fa-times"></i></div>
            </div>
          </div>
        </div>
        <div class="addNumber d-flex h-100r" (click)="addNumber()"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>Add number</div>
      </div>

Answer 1

在这里 <div *ngFor="let contact of contactFormGroup.controls; let i = index"> 您正在设置 contact。

但是在您的输入中您引用了 controls:

<input formControlName="controls.number" type="number" placeholder="Number" />

<input formControlName="controls.value" type="text" placeholder="Label" />

尝试更改为 formControlName="contact.number" 和 formControlName="contact.value"

*看起来您应该引用 contact.label 而不是 contact.number 因为那是您的 contact_phone 对象数组

中的内容

Answer 2

在 for 循环的 createContactNumber 方法中，您仅返回列表中的第一个对象。

if (this.contact.contact_phone) {
      for (let i = 0; i < this.contact.contact_phone.length; i++) {
        return this.formBuilder.group({
          label: [this.contact.contact_phone[i].label],
          value: [this.contact.contact_phone[i].value]
        });
      }
    } else {
      return this.formBuilder.group({
        label: [""],
        value: [""]
      });
    }

我做了一些修改。首先你的createContactNumber我改名为getContactNumbersAsFormGroups其中returns列表FormGroups.

private getContactNumbersAsFormGroups(): FormGroup[] {
    //check if user phone number exist, if yes show them in input, if not show empty input
    let inputs: FormGroup[] = []
    if (this.contact.contact_phone) {
      for (let i = 0; i < this.contact.contact_phone.length; i++) {
        inputs.push(this.formBuilder.group({
          label: [this.contact.contact_phone[i].label],
          value: [this.contact.contact_phone[i].value]
        }));
      }
    } else {
      inputs.push(this.getEmptyContactNumberForm());
    }
    return inputs;
}

方法getEmptyContactNumberForm returns只是空表格。

private getEmptyContactNumberForm(): FormGroup {
    return this.formBuilder.group({
        label: [""],
        value: [""]
    });
}

下一个变化是您的 addContactNumber 方法

this.contactList.push(this.getEmptyContactNumberForm());

最后在方法中ngOnInit

ngOnInit() {
   ...

   contact_phone: this.formBuilder.array(this.getContactNumbersAsFormGroups());

   ...
}

angular 对象数组的反应式表单控制问题

angular reactive form control problem with array of object

angular

angular-reactive-forms