В чем разница между FormGroup и FormArray? Когда что использовать?

У меня есть несколько динамических FormGroup в моем коде.

Кроме того, некоторые FormGroup имеют функцию добавления нескольких FormGroup/FormControl.

Поэтому при динамическом создании FormGroup я использовал FormBuilder.group(), но для нескольких групп есть массив данных, для которых я хочу создать FormControl.

Как я могу создать динамические FormControl для этого массива объектов данных?


angular angular-reactive-forms angular-forms formarray
person Mayuri More    schedule 16.07.2019    source источник
comment
angular.io/guide/   -  person Dimanoid    schedule 16.07.2019
comment
Вкратце, FormGroup действует как объект, а FormArray — как массив объектов.   -  person Rafael    schedule 16.07.2019
comment
@Rafael, FormArray может управлять и простым массивом   -  person Eliseo    schedule 16.07.2019
comment
@Eliseo еще не видел, чтобы это происходило, но если у вас есть какой-нибудь пример, был бы очень признателен. :)   -  person Rafael    schedule 16.07.2019
comment
@Рафаэль, myArray=[2,3]; myFormArray=new FormArray(myArray.map(x=>new FormControl(x)))   -  person Eliseo    schedule 16.07.2019
comment
Но видите ли, вы переводите его в FormControl, который, в общем, является объектом. Таким образом, вы на самом деле передаете не простой массив, а простой массив, который был приведен в список FormControls.   -  person Rafael    schedule 16.07.2019
comment
Таким образом, FormArray содержит FormGroups, а FormGroup содержит FormControls. Логика правильная? @Рафаэль   -  person Bigeyes    schedule 05.06.2021

Ответы (1)


arrow_upward
8
arrow_downward

Думайте о реактивных формах как о формах вокруг вашей модели данных. Таким образом, реактивная форма будет точно соответствовать вашей модели данных.

Рассмотрим эту модель данных, например:

{
  id: 1,
  name: "Leanne Graham",
  username: "Bret",
  email: "[email protected]",
  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]
    }
  ]]
}

Теперь вот общая суть того, на что будет похожа Reactive Form для этой модели данных.

  1. Если значением свойства является объект (например, address), то мы создадим для него FormGroup.
  2. Если значением свойства является массив (например, posts), то мы создадим для него FormArray.
  3. Если значение свойства является примитивом (например, id, name, isVerified и т. д.), мы создадим для него FormControl.

Вот и все. Все довольно прямолинейно.

Теперь вы можете подумать:

Что вы создадите для posts?

Что вы создадите для commentIds?

Итак, если вы вернетесь к правилам выше:

Вы создадите FormArray из FormGroups для posts.

И вы создадите FormArray из FormControls для commentIds.

Это должно ответить на ваш главный вопрос.

PS: нам понадобится дополнительная информация, чтобы помочь вам с точным кодом того, как сделать то, что вы пытаетесь сделать здесь.

person SiddAjmera    schedule 16.07.2019
comment
Ответ, кажется, экстраполирует многое из того, что SO еще не сказал. Вопрос неполный. - person Rafael; 16.07.2019