Angular реактивные формы formgroup

Мне нужно иметь formControl для двух разных массивов под одним и тем же узлом, чтобы я мог добавлять и удалять соответствующий вложенный узел в данной реактивной форме.

Ожидаемый формат JSON:

{
  "title": null,
  "days": [
    {
      "date": null,
      "nodes": [
        {
          "type": "leg",
          "from": null,
          "to": null
        },
        {
          "type": "activity",
          "category": null
        }
      ]
    }
  ]
}

Я реализовал управление днем ​​и узлом, для которого я мог добавлять и удалять поля формы соответственно, однако мне нужны отдельные элементы управления для типа ноги и активности в узлах.

Есть ли способ реализовать здесь вложенный formControl?

Обновление: нужны две группы форм в массиве форм, пожалуйста, помогите реализовать в HTML.

initX() {
    return this.fb.group({
      'date': [],
      'nodes': this.fb.array([
        this.initY(),
        this.initZ()
      ]),
    });
  }

  initY() {
    return this.fb.group({
      'type': ['leg'],
      'from': [],
      'to': []
    })
  }

  initZ() {
    return this.fb.group({
      'type': ['activity'],
      'category':[],
      'cost':[]
    })
  }

Ошибка: не удается найти элемент управления с путем: 'days - ›0 -› nodes - ›1 -› from'

Здесь можно найти stackblitz примера кода: https://stackblitz.com/edit/angular-ivy-fkgxrr


angular angular-reactive-forms angular-forms formarray angular-formbuilder
person keerthana jayakumar    schedule 26.09.2020    source источник
comment
Непонятно, что вы имеете в виду, говоря, что мне нужны отдельные элементы управления для типа leg и activity в узлах, потому что в вашем примере у вас уже есть два разных метода с разными возвращенными структурами.   -  person Francesco Colamonici    schedule 27.09.2020
comment
Привет, @FrancescoColamonici, я смог отформатировать в JSON, но у меня нет элементов управления в formArray в HTML. Дни и узлы зациклены индивидуально с отдельными элементами управления, я хочу, чтобы то же самое было сделано для Leg и Activities, но под узлами.   -  person keerthana jayakumar    schedule 28.09.2020
comment
@FrancescoColamonici Я обновил свое описание.   -  person keerthana jayakumar    schedule 28.09.2020

Ответы (4)


arrow_upward
0
arrow_downward

ну, в моем другом ответе массив узлов похож на

[
 {"type": "leg","from": null,"to": null,"category": null}
 {"type": "leg","from": null,"to": null,"category": null}
]

У formArray все элементы должны быть с одинаковыми свойствами.

Вопрос: узлы - это всего лишь массив с двумя элементами (один для контрольной ноги, а другой для контрольной категории)?

В этом случае days - это formArray, каждый элемент - это formGroup с двумя участниками, один из них - массив (не formArray) с двумя элементами

form=new FormGroup({
  title:new FormControl()
  days:new FormArray([
     date:new FormControl(),
     nodes:[new FormGroup({...}),new FormGroup({..})]
  ])
})

в этом случае у вас может быть три геттера

get days():FormArray
{
    return this.formGroup.get('days') as FormArray;
}
get leg(index)
{
    return this.days.at(i).get('nodes')[0] as FormGroup
}
get category(index)
{
    return this.days.at(i).get('nodes')[1] as FormGroup
}

И используйте напрямую [formGroup] в div, например

<div [formGroup]="category[i]">
   <input formControlName="from">
   ...
</div>

иначе я не могу понять ваш json

person Eliseo    schedule 28.09.2020

arrow_upward
0
arrow_downward

Попробуйте использовать двустороннюю привязку данных. Это упростит ваш процесс.

Eg:

<input type="text" name="name" [(ngModel)]="model.name">
person shivshankar alkondwar    schedule 27.09.2020

arrow_upward
0
arrow_downward

keethama, шаг за шагом. У вас есть formArray внутри formArray, поэтому создайте две функции, которые возвращают formArray

  get days():FormArray
  {
    return this.formGroup.get('days') as FormArray;
  }
  getNodes(i:number):FormArray
  {
    return this.days.at(i).get('nodes') as FormArray
  }

Что ж, для создания формы разделите и воспользуйтесь тремя функциями:

  createForm(data:any)
  {
    data=data || {title:null,days:null}
    return new FormGroup({
      title:new FormControl(data.title),
      days:data.days?
           new FormArray(data.days.map(d=>this.createDays(d))):
           new FormArray([])
      
    })
  }
  createDays(data:any=null)
  {
    data=data || {date:null,nodes:null}
    return new FormGroup({
        date:new FormControl(data.date),
        nodes:data.nodes?
              new FormArray(data.nodes.map(x=>this.createNodes(x))):
              new FormArray([])
    })
  }
  createNodes(data:any=null)
  {
    data={type:null,from:null,to:null,category:null,...data}
    return new FormGroup({
      type: new FormControl(data.type),
      from: new FormControl(data.from),
      to: new FormControl(data.to),
      category: new FormControl(data.category)
    })
  }

А теперь взглянем на .html.

<form *ngIf="formGroup" [formGroup]="formGroup">
  title:<input formControlName="title">
  <div formArrayName="days">
    <div *ngFor="let groupDays of days.controls;let i=index" [formGroupName]="i">
        date:<input formControlName="date">
        <div formArrayName="nodes">
          <div *ngFor="let groupnodes of getNodes(i).controls;let j=index" [formGroupName]="j">        
            type:<input formControlName="type"><br/>
        from:<input formControlName="from"><br/>

        to:<input formControlName="to"><br/>
        category:<input formControlName="category">
          </div>
        </div>
    </div>
  </div>
</form>

И в ngOnInit

this.formGroup=this.createForm(this.data)

Обратите внимание: если вы хотите добавить новый узел к узлу в индексном индексе, который вы используете

   this.getNodes(index).push(this.createNodes())

И добавить новый узел в массив days

   this.days.push(this.createDays())

неполный stackblitz

person Eliseo    schedule 27.09.2020
comment
Привет .. Спасибо за образец кода, однако код здесь все еще имеет тот же formArray и элементы управления для всех узлов. Мне нужны элементы управления для Leg и Activity отдельно под узлами. Есть ли какие-нибудь предложения? - person keerthana jayakumar; 28.09.2020
comment
node - это всего лишь массив с двумя элементами (один для контрольной ноги, а другой для контрольной категории)? Если это правда, см. Мой другой ответ, иначе я не могу понять ваш json. - person Eliseo; 29.09.2020

arrow_upward
0
arrow_downward

Я вижу, что это может быть не полный ответ, потому что рабочий образец с вложенными массивами форм займет некоторое время, но я почти уверен, что вы найдете интересную и полезную эту статью (которая помогла мне во многих подобных ситуациях):

person Francesco Colamonici    schedule 29.09.2020