Не удается привязать к динамически добавляемому вводу в модале начальной загрузки компонента Angular - PullRequest
Новая
       12

Не удается привязать к динамически добавляемому вводу в модале начальной загрузки компонента Angular

0 голосов
/ 07 мая 2018

Прежде всего, я не понимаю, как модал может иметь какое-либо отношение к этой проблеме, поскольку он на самом деле находится в коде этого компонента, а не в дочернем. Тем не менее, это на модальном, на всякий случай.

Я предпочитаю не использовать FormArray, поскольку мне нужно отслеживать свои выборы, которые могут быть добавлены в отдельный объект, поэтому я просто создаю уникальные идентификаторы для элементов управления и добавляю их в FormGroup. Я могу получить доступ к элементам управления в коде ts, установить значения, получить значения и т. Д., Но форма не является обязательной, и я не могу понять, почему нет.

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

<form [formGroup]="multiEditFormGroup" novalidate>
  <div *ngFor="let item of multiEditSelections; let i = index">
    <div>
      <mdb-select [options]="availablePropsSelect"
        placeholder="Choose property to edit"
        class="colorful-select dropdown-main"
        (selected)="multiEditSelectProp(item.selectorId, $event)"></mdb-select>
      <label>Property to edit</label>
    </div>

    <div>
      <div>
        <input mdbActive
           type="text"
           class="form-control"
           [formControlName]="item.controlId" />
       </div>
     </div>
   </div>
 </form>

Исключения из кода TS: 

public multiEditFormGroup = new FormGroup({});

onModalOpen():void {

  const selectorId = this.utils.uuid();
  this.multiEditFormGroup.addControl(selectorId, this.propSelector);
  this.multiEditSelections.push({
    selectorId: selectorId,
    prop: '',
    label: '',
    type: '',
    controlId: '' // not yet known since type hasn't been chosen
  });
}

onSelect(selectorId: string, selectEvent: any): void {

  let selection = this.multiEditSelections.find(selection => {
    return selection.selectorId === selectorId;
  });

  const controlId = this.utils.uuid();
  const prop = selectEvent.value;
  this.multiEditFormGroup.get(selection.selectorId).setValue(prop);
  this.multiEditFormGroup.markAsDirty();
  this.multiEditFormGroup.markAsTouched();
  const model = this.multiEditModel.find(model => {
    return model.prop === prop;
  });
  this.multiEditFormGroup.addControl(controlId, this.testCtrl);
  selection.controlId = controlId;
  selection.prop = prop;
  selection.label = model.label;
  selection.type = model.type;
}

Запись в консоль показывает, что элементы добавляются в FormGroup, но привязка к DOM не происходит. Например, я могу добавить обработчик событий (keyup) к своему вводу и установить значение в элементе управления формы, который уже был создан, и FormGroup обновлена. Однако любой ввод, добавленный в интерфейс, не обновляет FG, поскольку он, очевидно, не является обязательным. Это проблема синхронизации или потому что controlId обновляется позже? Я создаю FormControl перед обновлением моего массива, который повторяется.

Да, и я не получаю ошибок в консоли по этому поводу.

1 Ответ

0 голосов
/ 07 мая 2018

Я думаю, вам нужно внести это изменение: 

[formControlName]="item.controlId"

должно быть: 

formControlName="{{item.controlId}}"
...