FormGroup和FormArray有什么区别?什么时候使用什么?

时间:2019-07-16 07:39:51

标签: angular angular-reactive-forms angular-forms formarray

我的代码中有多个动态FormGroup

此外,某些FormGroup具有添加多个FormGroup / FormControl的功能。

因此,在动态创建FormGroup时,我使用了FormBuilder.group(),但是对于多个组,我要为其创建FormControl的数据数组。

如何为该数据对象数组创建动态FormControl

1 个答案:

答案 0 :(得分:2)

将反应式表单视为围绕数据模型的表单。因此,反应式表单将完全符合您的数据模型的方式。

请考虑以下数据模型:

{
  id: 1,
  name: "Leanne Graham",
  username: "Bret",
  email: "Sincere@april.biz",
  isVerified: false,
  address: {
    street: "Kulas Light",
    suite: "Apt. 556",
    city: "Gwenborough",
    zipcode: "92998-3874",
  },
  phone: "1-770-736-8031 x56442",
  website: "hildegard.org",
  posts: [
    [{
        userId: 1,
        id: 1,
        title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
        commentIds: [1, 2, 3, 4, 5]
      },
      {
        userId: 1,
        id: 2,
        title: "qui est esse",
        body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
        commentIds: [6, 7, 8, 9, 10]
      }
    ]
  ]
}

现在,这是此数据模型的反应形式的总体要旨。

  1. 如果属性的值是一个Object(如address),那么我们将为其创建一个FormGroup
  2. 如果属性的值为Array(如posts),那么我们将为其创建一个FormArray
  3. 如果属性的值是基元(例如idnameisVerified等),我们将为其创建FormControl。

仅此而已。一切都非常简单。

现在您可能会想:

  

您将为posts创建什么?

     

您将为commentIds创建什么?

因此,如果您返回上述规则:

  

您将为FormArray创建FormGroupposts中的FormArray

     

然后您将为FormControl创建commentIds"files.exclude": { "master.[^tp]*": true, "master.[^tp][^ed]*": true, "master.[^tp][^ed][^xf]*": true, "*.lol": true }, 中的in team.json: "relations": { "person": { "type": "belongsTo", "model": "Person", "foreignKey": "teamID" } }

这应该回答您的主要问题。

PS::我们将需要更多信息来帮助您获得有关如何执行此处要执行的操作的确切代码。