Question

已解决：感谢@Gourav-我只需要像这样将数据添加到我的表单中即可：

<!-- App.vue -->

<v-app>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>

  <v-app-bar app>
    <!-- -->
  </v-app-bar>

  <!-- Sizes your content based upon application components -->
  <v-content>

    <!-- Provides the application the proper gutter -->
    <v-container fluid>

      <!-- If using vue-router -->
      <router-view></router-view>
    </v-container>
  </v-content>

  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

}

更新：表单构建器代码显示正确；但是，问题似乎是json数据在首次加载时未正确填充。这是页面加载后的表单数据的屏幕截图。我只显示第一个空联系人对象，但接下来的2个也是空的。

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

buildFormDynamic(contact: Contact): FormGroup {
return this.fb.group({
  name: [contact && contact.name],
  phone: [contact && contact.phone],
  phoneExt: [contact && contact.phoneExt],
  email: [contact && contact.email],
  implementationRole: [contact && contact.implementationRole],
  operationsRole: [contact && contact.operationsRole],
  pswId: [contact && contact.pswId],
});

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

{
  "data": {
    "isAdmin": true,
    "contacts": [
      {
        "name": "Contact 1",
        "phone": "555-555-1212",
        "phoneExt": 351,
        "email": "user1@test.com",
        "implementationRole": true,
        "operationsRole": false,
        "userId": 123
      },
      {
        "name": "Contact 2",
        "phone": "555-555-1212",
        "phoneExt": 225,
        "email": "user2@test.com",
        "implementationRole": false,
        "operationsRole": true,
        "userId": 456
      },
      {
        "name": "Contact 3",
        "phone": "555-555-1212",
        "phoneExt": 785,
        "email": "user3@test.com",
        "implementationRole": false,
        "operationsRole": true,
        "userId": 654
      }
    ]
  }
}

这是我更新的HTML：

private service: ContactsService;
private contacts: Array;
clientProfileForm: FormGroup;

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

ngOnInit() {
  this.contacts = this.service.getContacts();
  this.createForm();
}

createForm() {
  let arr = [];

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

  this.clientProfileForm = this.fb.group({
    isAdmin: [""],
    isNotAdmin: [""],
    contactDetails: this.fb.array(arr)
  });
}

buildFormDynamic(contact: Object): FormGroup {
  return this.fb.group({
    name: [""],
    phone: [""],
    phoneExt: [""],
    email: [""],
    implementationRole: [""],
    operationsRole: [""],
    userId: [""]
  });
}

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

<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.contacts.controls[i]
          .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>
      <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>
  </div>
</form>

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

因为我需要的是该表单组的控制下：

Answer 1

好的，我明白了。我在使用表单数组处理动态表单时遇到了类似的问题。

您需要在模板中修改'clientProfileForm.controls'。

在您的组件ts文件中添加以下功能。

    getContactControls() {
        return (this.clientProfileForm.get('contactDetails') as FormArray).controls;
    }

然后按如下所示修改您的模板文件。

    <div formArrayName="contactDetails" *ngFor="let contact of getContactControls(); let i = index">
        ...
    </div>

这里是工作中的Stakblitz app。

Answer 2

<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访问此表单数组，则不应在插值中使用函数，因为由于连续调用函数，函数可能会破坏应用程序性能。

Functions in interpolation

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>

显示表单中的联系人列表，并允许用户添加新联系人

2 个答案: