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

Question

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

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

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

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

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

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

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

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

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

Answer 1

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

2. Для ключевых значений поставить как это

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

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

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>