Angular 6 Form Array не может быть доступен внутри ng-контейнера - PullRequest
Новая
       62

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

1 голос
/ 26 марта 2019

У меня есть 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 для formarray: 

<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 не может найти элементы управления, которые находятся внутри Formarray.FormGroups (то есть sectionName из модели данных), хотя при поиске элементов управления, соответствующих базовым элементам управления formgroup (имя и описание из модели данных), проблем не возникает.Есть ли способ, которым я могу вручную передать ссылку на форму группы в ng-контейнер?Короткий пример можно увидеть здесь .

1 Ответ

1 голос
/ 26 марта 2019

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

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

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

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

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

Привязка FormArray

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

Еще одна вещь

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


Вот рабочая: stackblitz

...