Блог

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

Создать FormGroup как

   keyValueFA = new FormArray([this.newKeyValueFG]);

  propertyFG = new FormGroup({
    keyValue: this.keyValueFA,
  });
 

получатель для создания новой группы форм

   get newKeyValueFG(): FormGroup {
    return new FormGroup({
      key: new FormControl(null),
      value: new FormControl(null),
    });
  }
 

Другие методы для установки, удаления, получения группы форм

   get keyValueArrayFGControls(): FormGroup[] {
    return this.keyValueFA.controls as FormGroup[];
  }

  addNewKeyValueFG(): void {
    this.keyValueFA.push(this.newKeyValueFG);
  }

  removeNewKeyValueFG(index: number): void {
    this.keyValueFA.removeAt(index);
  }
 

В шаблоне повторите keyValueArrayFGControls

 <form [formGroup]="propertyFG">
  <div
    formArrayName="keyValue"
    *ngFor="let fg of keyValueArrayFGControls; let i = index"
  >
    <div [formGroup]="fg">
      {{ i   1 }})
      <div><input type="text" formControlName="key" placeholder="Key" /></div>
      <div>
        <input type="text" formControlName="value" placeholder="Value" />
      </div>
      <button (click)="removeNewKeyValueFG(i)">Remove</button>
    </div>
  </div>
  <button (click)="addNewKeyValueFG()">Add</button>
</form>
 

Рабочая демонстрация