时间戳

首页 > 解决方案 > 在表单中显示联系人列表并允许用户添加新联系人

angular - 在表单中显示联系人列表并允许用户添加新联系人

问题描述

已解决：感谢@Gourav - 我只需要将数据添加到我的表单中，如下所示：

buildFormDynamic(item: Item): FormGroup {
return this.fb.group({
  data: [item && item.data],
});

}

更新：表单生成器代码显示正确；但是，问题似乎是 json 数据在首次加载时没有正确填充。

更新：我正在使用 Angular 8，我现在正在使用这个模拟 JSON 动态创建我的表单：

{
  "data": {
    "item": [
      {
        "data": "object property"
      },
      {
        "data": "object property 2",
      }
    ]
  }
}

这个想法是表单将显示所有返回项目的联系部分；在这种情况下 3. 这是我动态构建它的方式：

private service: ItemService;
private items: Array;
itemForm: FormGroup;

constructor(private fb: FormBuilder, private service: ItemService) 
{
  this.service = service;
}

ngOnInit() {
  this.items = this.service.getItems();
  this.createForm();
}

createForm() {
  let arr = [];

  for (let i = 0; i < this.items.data.item.length; i++) {
    arr.push(this.buildFormDynamic(this.items.data.item[i]));
  }

  this.itemForm = this.fb.group({
    itemDetails: this.fb.array(arr)
  });
}

buildFormDynamic(contact: Object): FormGroup {
  return this.fb.group({
    data: [""],
    itemId: [""]
  });
}

这是我更新的 HTML：

<form [formGroup]="itemForm" >
  <div>
    <div>
      <input formControlName="isItem" type="radio" name="item" />
      <input formControlName="isNotItem" type="radio" name="item" />
    </div>
  </div>

  <div formArrayName="itemDetails"
      *ngFor="
        let contact of itemForm.controls.items.controls[i]
          .controls;
        let i = index
      ">
    <div formGroupName="{{ i }}">
    <div>
      <input formControlName="name" type="text" id="itemName" />
    </div>

    <div>
      <input formControlName="itemId" type="text" id="itemId" />
    </div>

    <div>
      <button type="button" (click)="addItem()">
        Add an Item
      </button>
    </div>

    <div>
      <button type="button">Cancel</button>
      <button type="button">Save</button>
    </div>
    </div>
  </div>
</form>

我的控件路径没有任何错误。当我检查我的东西是否在我期望的地方时：

let item of itemForm.controls.items.controls[i]
          .controls;

...这似乎是正确的路径。但我仍然收到“控件未定义”的错误。这不是正确的方法吗？我的 FB 数组有 3 个表单组。

在此处输入图像描述

标签： angular

解决方案

<form [formGroup]="clientProfileForm">
  <div>
    <div>
      <input formControlName="isAdmin" type="radio" name="admin" />
      <input formControlName="isNotAdmin" type="radio" name="admin" />
    </div>
  </div>

  <div formArrayName="contactDetails" *ngFor="
        let contact of clientProfileForm.controls.contactDetails.controls; let i = index
      ">
    <div formGroupName="{{ i }}">
      <div>
        <input formControlName="name" type="text" id="fullName" />
      </div>
      <div>
        <input formControlName="phone" type="number" />
        <input formControlName="phoneExt" type="number" id="phoneExt" />
      </div>
      <div>
        <input formControlName="email" type="text" id="email" />
      </div>
    </div>
  </div>
  <div>
    <div>
      <input formControlName="implementationRole" type="checkbox" name="implementationRole" />

      <input formControlName="operationsRole" type="checkbox" name="operationsRole" />
    </div>

    <div>
      <input formControlName="userId" type="text" id="userId" />
    </div>

    <div>
      <button type="button" (click)="addContact()">
        Add a contact
      </button>
    </div>

    <div>
      <button type="button">Cancel</button>
      <button type="button">Save</button>
    </div>
  </div>
</form>

如果你想在 html 中访问这个表单数组，你不应该在插值中使用函数，因为它会因为连续调用函数而降低你的应用程序性能。

插值函数

let contact of clientProfileForm.controls.contactDetails.controls

您可以简单地在 html 中使用，这不会导致任何问题。

这将在 3 个表单组上循环运行并将值分配给控件。

<div *ngFor="
    let contact of clientProfileForm.controls.contactDetails.controls; let i = index
  ">
<div formGroupName="{{ i }}">
  <div>
    <input formControlName="name" type="text" id="fullName" />
  </div>
  <div>
    <input formControlName="phone" type="number" />
    <input formControlName="phoneExt" type="number" id="phoneExt" />
  </div>
  <div>
    <input formControlName="email" type="text" id="email" />
  </div>
</div>

推荐阅读