как сделать динамический ввод внутри тега формы с реактивной формой

я пытаюсь сделать реактивную форму с динамическим вводом

поэтому я создал компонент реактивной формы, подобный этому

main_component.ts

constructor(private formBuilder: FormBuilder) {
    this.operationGroupForm = this.formBuilder.group({
      'operation': '',
      'searchTerm': ''
    });

  }

main_component.html

<form [formGroup]="operationGroupForm">
     <input type="text" formControlName="operation">
     <div operationClass [type]="'mycustomtype'"
     [_formControlName]="'searchTerm'"></div>
     </div>
</form>

и создал директиву operationClass, которая добавилась к div и внедрила компонент в div

operationClass.directive.ts

constructor(private el: ElementRef, private render: Renderer2, private viewContainerRef: ViewContainerRef,
    private componentFactory: ComponentFactoryResolver) {}

ngOnInit(): void {
      var comRef = this.componentFactory.resolveComponentFactory(input_component);
      var _comRef = this.viewContainerRef.createComponent(comRef);
      _comRef.instance.formControlName = this._formControlName;
      _comRef.instance.type = this.type;
}

и этот компонент отображает правильный ввод, принимая formControlName и type и отображая ввод в настраиваемых условиях.

и этот компонент для рендеринга ввода: input_component.ts

  @Input() formControlName: string;
  @Input() type: string;

  constructor() {
  }

  ngOnInit(): void {
  }

input_component.html

<ng-container *ngIf="type">
  <ng-container [ngSwitch]="type">
    <ng-container *ngSwitchCase="'mycustomtype'">
      <input type="text" [formControlName]="formControlName" class="form-control" />
    </ng-container>
    <ng-container *ngSwitchDefault>
      <input type="number" [formControlName]="formControlName" class="form-control" />
    </ng-container>
  </ng-container>
</ng-container>

проблема в том, что, как я думаю, внутренний ввод formControlName не может видеть внешний formGroup, потому что он генерирует эту ошибку

ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

      Example:

      
    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });
    at Function.controlParentException (forms.js:1692)
    at FormControlName._checkParentType (forms.js:6059)
    at FormControlName._setUpControl (forms.js:6063)
    at FormControlName.ngOnChanges (forms.js:5995)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2131)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7331)
    at refreshEmbeddedViews (core.js:8408)

angular angular-reactive-forms angular10
person Hassan Ahmed    schedule 07.09.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Рассмотрите возможность применения к вашему коду следующих изменений:

main_component.ts

Значение для каждого имени элемента управления представляет собой массив, содержащий начальное значение в качестве первого элемента массива. (Документы Angular)

constructor(private formBuilder: FormBuilder) {
  this.operationGroupForm = this.formBuilder.group({
    'operation': [''], // <== provide an array
    'searchTerm': [''] // <== provide an array
  });
}

input_component.ts

Поскольку formControlName должен использоваться с родительской директивой formGroup, вы захотите добавить директиву formGroup и передать ей свой экземпляр formGroup, а не передавать свой экземпляр formGroup, вы можете внедрить его в свой дочерний компонент, используя ControlContainer, как показано ниже:

import { FormGroup, ControlContainer } from '@angular/forms';

...

@Input() formControlName: string;
@Input() type: string;
 public formGroup: FormGroup;

constructor(public controlContainer: ControlContainer) { // <== inject reference to formGroup via ElementInjector
  this.formGroup = controlContainer.control as FormGroup
}

input_component.html

<ng-container *ngIf="type">
  <ng-container [ngSwitch]="type" [formGroup]="formGroup"> <!-- <== pass injected form -->
    <ng-container *ngSwitchCase="'mycustomtype'">
      <input type="text" [formControlName]="formControlName" class="form-control" />
    </ng-container>
    <ng-container *ngSwitchDefault>
      <input type="number" [formControlName]="formControlName" class="form-control" />
    </ng-container>
  </ng-container>
</ng-container>

Для получения дополнительной информации о FormContainer

person Rafi Henig    schedule 07.09.2020
comment
большое спасибо. но не могли бы вы объяснить эту строку, пожалуйста, this.formGroup = controlContainer.control as FormGroup и что такое controlContainer и как он узнает, что взять operationGroupForm, где ссылка, и если есть другая группа форм, какая она будет брать. а вообще большое спасибо. - person Hassan Ahmed; 08.09.2020
comment
Я столкнулся с другой проблемой, и внутренняя группа форм отделена от внешней группы. при изменении данных во внутренней форме это не меняет их значения во внешней форме подписчика. - person Hassan Ahmed; 08.09.2020
comment
@Hassan Ahmed убедитесь, что вы не переназначили operationGroupForm новый экземпляр FormControl, так ли это? - person Rafi Henig; 08.09.2020
comment
@Hassan Ahmedчто вы подразумеваете под внутренней группой форм - person Rafi Henig; 08.09.2020
comment
@Rafi Heing группа форм в input_component - person Hassan Ahmed; 08.09.2020
comment
убедитесь, что вы не переназначаете operationGroupForm новый экземпляр FormControl - person Rafi Henig; 08.09.2020

arrow_upward
-1
arrow_downward

Похоже, вам не хватает директивы FormGroup и экземпляра в компоненте и классе, где используется элемент управления, т. е. input.component.{ts|html}.

Что-то типа:

this.myFormGroup = new FormGroup({
   formControlName: new FormControl()
});

См. раздел Создание экземпляра FormGroup в документации Angular.

person Michael P. Bazos    schedule 07.09.2020
comment
это прямо здесь this.operationGroupForm = this.formBuilder.group({ 'operation': '', 'searchTerm': '' }); - person Hassan Ahmed; 08.09.2020