Добавить новую пару ключ-значение в угловой динамической форме

Question

У меня есть требование в угловой динамической форме добавлять пару ключ-значение по нажатию кнопки добавления. Оба ключа и значения должны быть доступны для редактирования

a) - Ключ либо мы можем выбрать из основного списка, либо он можетбыть свободным текстовым полем (если значение не доступно в основном списке, тогда автозаполнение должно быть заменено текстовым полем).

b) - значение должно быть текстовым полем.

Кроме того, рядом должно бытькнопка «Сохранить» и кнопка «Удалить» вместе с полями выше, чтобы отправить или удалить ее.

В соответствии с текущей реализацией в нашем проекте «ключ» всегда жестко закодирован, а «значение» доступно для редактирования внутри группы форм.

Какой должен быть лучший подход для добавления новой пары ключ-значениев динамической форме?

1- Нужно ли нам создавать новую группу форм для добавления новой строки?

2- Использовать текущий подход и расширять функциональность для него в той же группе форм

Любой подход / руководство будет приветствоваться.

Answer 1

1. При нажатии кнопки создайте функцию, которая создаст группу форм и добавит массив форм в родительскую группу FormGroup

Для значений ключей пут, таких как

  let r=this.fb.group({mvl:"keey",sec:"val"});

Отметьте свой ввод только для чтения, чтобы сделать его не съедобным

foo:FormGroup
constructor(public fb:FormBuilder) {
  this.foo=this.fb.group({
      string  :"",
      number:0,
      common1:this.common,
      common2:this.common,
      multi:this.fb.array([])
    });
}

add()
{
  let r=this.fb.group({mvl:"keey",sec:"val"});
  (this.foo.get("multi") as FormArray).push(r);
}

Внутри вашей формы поместите html, как это

 <div formArrayName="multi">
            <div *ngFor="let el of multiForm;let i=index" [formGroupName]="i">

                    <input type="text" matInput placeholder="mvl{{i}}" formControlName="mvl">

                    <input type="text" matInput placeholder="sec{{i}}" formControlName="sec">
            </div>
            <div (click)="add()">add</div>
        </div>