如何在带有反应形式的表单标签内进行动态输入

问题描述

我正在尝试使用动态输入来创建反应形式

所以我创建了这样的反应形式组件

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>

并创建了附加到div的指令operationClass，并将组件注入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)

解决方法

请考虑将以下更改应用于您的代码：

main_component.ts

每个控件名称的值是一个数组，其中包含初始值作为数组中的第一项。 （Angular Docs）

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

input_component.ts

由于formControlName必须与父formGroup指令一起使用，因此您需要添加formGroup指令并将其传递给formGroup实例，而不是传递{您可以沿{1}}实例使用ControlContainer将其注入子组件，如下所示：

formGroup

input_component.html

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
}

For further information about FormContainer

,

好像您在使用控件的组件和类（即 input.component。{ts | html} ）中缺少FormGroup指令和实例化。

类似的东西：

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

请参阅Angular文档中的Create a FormGroup instance部分。