Как обновить динамически генерируемые ключи и значения в форме angular - PullRequest
Новая
       4

Как обновить динамически генерируемые ключи и значения в форме angular

0 голосов
/ 12 февраля 2020

У меня есть данные что-то вроде: 

"data": [
   {
    "name": "Joe"
   },
   {
    "location": "USA"
   },
   {
    "age": "unknown"
   }
 ]

ПРИМЕЧАНИЕ: этот объект может отличаться (не фиксированной длины).

Я отображаю в виде:

имя (в качестве метки): Джо (в качестве входного значения)

местоположение (как метка): США (как значение ввода)

возраст (как метка): неизвестно (в качестве входного значения)

app.component. html: 

<form [formGroup]="angularForm">
   <div class="key-value-container" *ngFor="let item of values">
      <div class="key-value">
         <div class="key-value-lable">
            <label class="label">{{item.key}}</label>
         </div>
         <div class="input-container">
           <input class="input-text" matInput value="{{item.value}}">
         </div>
        </div>
      </div>
 <button type="button" class="primary-button" mat-flat-button (click)="_updateForm()">Update</button>
</form>

Я хочу обновить данные методом POST, когда Я нажимаю "_ updateForm ()" как: 

{
 "key1" (name):"value1"(updated_name),
 "key2" (location):"value2"(updated_location),
 "key3"(age):"value3" (updated_age)
}

и как мне создать formControlerName для этой формы?

1 Ответ

1 голос
/ 12 февраля 2020

formControlName можно установить динамически: 

<input *ngFor="let field of dynamicData" [formControlName]="field.name">

Лог c будет намного проще, если вы измените ваши данные на что-то с согласованными ключами, такими как: 

 [
   {"label": "first", "value": "Mark"},
   {"label": "last", "value": "Smith"},
   {"label": "age", "value": "35"}
];

Вы может по-прежнему выполнять ваши данные, просто нужно выполнить некоторые дополнительные действия. Смотрите следующий пример, который похож на то, что вы пытаетесь сделать:

https://stackblitz.com/edit/angular-form-array-dynamic?embed=1&file=src / app / app.ts

...