0

我正在尝试使用动态输入制作反应形式

所以我像这样创建了反应式表单组件

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;
}

并且该组件通过获取formControlNameandtype并在自定义条件下呈现输入来呈现正确的输入

并且用于呈现输入的组件是： 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 to 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)
4

2 回答 2

1

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

main_component.ts

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

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

输入组件.ts

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

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 的更多信息

于 2020-09-07T23:11:40.413 回答
-1

看起来您缺少FormGroup使用控件的组件和类中的指令和实例化，即input.component.{ts|html}。

就像是：

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

请参阅 Angular 文档中的创建 FormGroup 实例部分。

于 2020-09-07T22:56:46.560 回答