Angular 9 вложенных форм с использованием шаблонов: как добавить более одного и того же дочернего компонента к объекту формы? - PullRequest
Новая
       87

Angular 9 вложенных форм с использованием шаблонов: как добавить более одного и того же дочернего компонента к объекту формы?

0 голосов
/ 26 мая 2020

Я новичок в Angular, но я много пытался найти решение в Google, прежде чем пришел сюда.
Моя проблема:
Используя шаблонный подход, я пытаюсь создать вложенную форму, которая включает также поля ввода дочернего компонента. Чтобы зарегистрировать дочерний компонент в родительском объекте формы, в дочернем компоненте я добавил: 

viewProviders: [ { provide: ControlContainer, useExisting: NgForm }

Он работает нормально, и входные данные дочернего компонента теперь интегрированы в родительский объект формы. Однако дочерний компонент упоминается более одного раза, поэтому его набор полей должен быть интегрирован в formobject более одного раза. Вместо этого поля ввода дочернего компонента добавляются только один раз. Я думаю, это связано с тем, что для полей ввода нужны уникальные имена, иначе они просто перезаписываются, или?
Для большей ясности я использую ngFor для l oop поверх конфигурации файл, содержащий информацию о том, как часто дочерний компонент необходимо загружать в родительский шаблон. Это шаблон родительского компонента, где I l oop поверх файла конфигурации. Я создаю аккордеон с Angular Bootstrap:

parent. html

<form (ngSubmit)="onSubmitJob()" #f="ngForm">
    <div class="form-group">
      <div *ngFor="let process of processMappings">
        <div *ngIf="process.processId === selectedProcessingTool">
          <div *ngFor="let input of process.inputs; let i = index">
            <ngb-accordion
              #acc="ngbAccordion"
              activeIds="ngb-panel-0"
            >
              <ngb-panel title="{{ input.inputType }}">
                <ng-template ngbPanelContent>
                  <child-component
                    *ngIf="
                      input.inputType == 'StaticSubsetDefinition';
                    "
                  ></child-component>
                </ng-template>
              </ngb-panel>
            </ngb-accordion>
          </div>
        </div>
      </div>
    </div>
</form>

Это шаблон дочернего компонента, который включает fieldset:

child. html

<fieldset ngModelGroup= "staticSubsetDefinition">

  <div class="form-group">
    <label for="value">Wert</label>
    <input
      style="max-width: 300px;"
      class="form-control"
      id="value"
      placeholder=""
      ngModel
      name = "value"
      required
    />
  </div>

  <div class="form-group">
    <label class="my-1 mr-2" for="dataType">Datentyp</label>
    <select
      class="form-control"
      id="dataType"
      style="max-width: 300px;"
      ngModel
      name="dataType"
      required
    >
      <option selected></option>
      <option value="text">Text</option>
      <option value="numeric">numerisch</option>
    </select>
  </div>
</fieldset>

Шаблон родительского элемента создает согласование с двумя панелями, поскольку дочерний элемент дважды загружается в шаблон . Однако formobject регистрирует только один, и я предполагаю, что это связано с тем, что входам нужны уникальные имена.
Поэтому мой вопрос: что я могу сделать, чтобы изменить имя поля ввода, например, добавив индекс в набор полей name?
Я не знаю, как добавить индекс к входным именам дочернего компонента, например, в for l oop. Как это сделать? Или есть другой способ указать Angular добавлять форму так часто, как она загружается в шаблон?

Я имею в виду что-то вроде этого между звездами (что неверно, я знаю, просто чтобы вы поняли, что я имею в виду): 

<div *ngFor="let input of process.inputs; let i = index">
            <ngb-accordion
              #acc="ngbAccordion"
              activeIds="ngb-panel-0"
            >
              <ngb-panel title="{{ input.inputType }}">
                <ng-template ngbPanelContent>
                  <child-component
                    *ngIf="
                      input.inputType == 'StaticSubsetDefinition';
                    " **inputname == 'inputname_ + i'**
                  ></child-component>
                </ng-template>
              </ngb-panel>
            </ngb-accordion>
          </div>

По сути, я не знать, как получить доступ к имени поля ввода из шаблона родительского компонента. Однако, если есть совершенно другой способ добавления полей компонентов в forminput, я был бы рад, как это сделать в этом коде.

1 Ответ

0 голосов
/ 26 мая 2020

Я сам нашел решение, и, как я ожидал, это было простое решение, просто с помощью директивы Angulars Input: мне просто нужно добавить Input в дочерний компонент, определить переменную, которая получает значения из родительского шаблона , и используйте значения (здесь индекс), чтобы изменить имена набора полей в дочернем компоненте с интерполяцией строк:

child.ts 

import { Input} from '@angular/core';
...
@Input() index: number;

In в дочернем шаблоне я меняю имя набора полей с помощью строковой интерполяции:

дочерний. html

<fieldset ngModelGroup= "staticSubsetDefinition_{{index}}">

Значения индексной переменной затем поступают из родительского шаблона с использованием привязки свойств [index] = i:

parent. html 

<div *ngFor="let input of process.inputs; let i = index">
            <ngb-accordion
              [closeOthers]="true"
              #acc="ngbAccordion"
              activeIds="ngb-panel-0"
            >
              <ngb-panel title="{{ input.inputType }}">
                <ng-template ngbPanelContent>
                  <child-component [index]="i"
                    *ngIf="
                      input.inputType == 'StaticSubsetDefinition';
                    "
                  ></child-component>
                </ng-template>
              </ngb-panel>
            </ngb-accordion>
          </div>
...