Angular 6 Form Array недоступен внутри ng-контейнера

У меня есть ng-контейнер, который описывает все мои возможные шаблоны полей формы, по сути, на большом операторе switch в зависимости от метаданных поля:

<ng-template #dynamicFormField let-field="inputField">
  <div *ngIf="field.dataTypeName == 'ShortText'">
    <mat-form-field class="col-md-6">
      <input matInput type="text" [placeholder]="field.attributeLabel" [formControlName]="field.attributeName">
    </mat-form-field>
  </div>

  <div *ngIf="field.dataTypeName == 'LongText'">
    <mat-form-field class="col-md-12">
      <input matInput type="text" [placeholder]="field.attributeLabel" [formControlName]="field.attributeName">
    </mat-form-field>
  </div>

  <div *ngIf="field.dataTypeName == 'Number'">
    <mat-form-field>
      <input matInput type="number" [placeholder]="field.attributeLabel" [formControlName]="field.attributeName">
    </mat-form-field>
  </div>
<ng-template>

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

{
  name: 'Article Name',
  description: 'Some description of the article',
  sections: [
    {
      sectionName: 'Rich text section',
      sectionContent: 'Some rich text'
    },
    {
      sectionName: 'Second section',
      sectionContent: 'Some rich text'
    }
  ]
}

где каждое из этих полей имеет соответствующие метаданные, описывающие его свойства формы.

Я хочу иметь возможность повторно использовать оператор переключения ввода как в базовой группе форм, так и в группах форм в массиве форм. Однако внутренняя часть ng-контейнера не может получить доступ к группе форм, указанной входом formGroupName в массиве форм:

<div *ngFor="let field of this.sectionTypeSchemas[section.value.sectionTypeId]">
  <div *ngIf="field.isVisible != false" formGroupName="{{i}}">
    <ng-container *ngTemplateOutlet="dynamicFormField;context:{ inputField:field }"></ng-container>
  </div>
</div>

Ошибка, с которой я сталкиваюсь, в основном заключается в том, что Angular не может найти элементы управления, которые находятся внутри FormGroups формального массива (то есть sectionName из модели данных), хотя нет проблем с поиском элементов управления, соответствующих элементам управления базовой formgroup (имя и описание из модель данных). Есть ли способ вручную передать ссылку на группу форм в контейнер ng? Краткий пример можно увидеть здесь.


angular angular-reactive-forms ng-template ng-container
person Joe H    schedule 26.03.2019    source источник
comment
Почему бы вам не использовать для этого дополнительный компонент с @Input () Decorator?   -  person MullisS    schedule 26.03.2019
comment
@MullisS Я пробовал, но до сих пор нет возможности явно передать ему ссылку на группу форм. Вы сталкиваетесь с теми же ошибками контекста.   -  person Joe H    schedule 26.03.2019
comment
Не могли бы вы сделать минимальный пример на stackblitz?   -  person MullisS    schedule 26.03.2019
comment
@MullisS Обязательно посмотрите здесь: ссылка. Как видите, поля отображаются, но не удается найти связанные с ними элементы управления формой.   -  person Joe H    schedule 26.03.2019
comment
Даже ответ Эрбенскенига верен, вам следует написать компонент для этого, поскольку вы хотите, чтобы ваш компонент не знал структуру формы формы. Взгляните на это: stackblitz.com/edit/   -  person MullisS    schedule 26.03.2019

Ответы (1)


arrow_upward
3
arrow_downward

Прежде всего, я бы, вероятно, выбрал подкомпонент, а не ng-template, как это было предложено в комментариях выше.

Тем не менее, есть две вещи, которые необходимо исправить, чтобы ваш пример заработал.

Использование FormControls внутри другого компонента или ng-шаблона

Каждый раз, когда вы используете formControl группы formGroup внутри ng-template, вам необходимо убедиться, что вы добавили тег, имеющий привязку formGroup, также внутри вашего ng-template, если form-tag размещен вне ng-template.

В вашем случае есть что-то особенное, потому что formGroup внутри вашего ng-шаблона на самом деле является subFormGroup - formGroup для каждого formArrayItem

Привязка FormArray

Если вы привязываетесь к formArray, вам нужно иметь в виду, что вам понадобится formArrayName на внешнем элементе управления, а также привязка к индексу. Дополнительные пояснения см. Здесь: Привязка FormArray

Еще кое-что

У вас есть опечатка внутри stackblitz: secitonHeader, а не sectionHeader.


Вот рабочий: stackblitz

person Erbsenkoenig    schedule 26.03.2019
comment
У меня аналогичная проблема здесь stackoverflow.com/questions/56806982/. Можете ли вы увидеть, есть ли у вас какое-либо решение для вложенных реактивных форм. К ссылке прикреплен stackblitz - person Vikhyath Maiya; 28.06.2019
comment
Есть ли какое-либо официальное заявление о том, что каждый раз, когда вы используете formControl группы formGroup внутри ng-шаблона, вам нужно убедиться, что вы добавили тег, имеющий привязку formGroup? - то же самое относится и к [formGroupName]. Мне нужны были несколько повторно используемых компонентов, где иногда есть вложенная группа, иногда нет, и это просто не работает, что расстраивает. - person Adam Marshall; 06.09.2019
comment
Я обнаружил, что если formControl находится внутри ng-шаблона или другого компонента, чтобы иметь повторно используемый компонент, вам нужно передать formGroup и добавить его к окружающему элементу, например div. Я не уверен, есть ли официальное заявление. Я посмотрю на это. Но я не понимаю твоей проблемы. Может быть, откройте новый вопрос (и предоставьте stackblitz или jsfiddle), и я посмотрю на него. - person Erbsenkoenig; 09.09.2019