angular - 使用 ng-template 插入响应式表单输入(从组件外部)

Question

注意:我正在寻找 Reactive Forms Approach 的解决方案。模板驱动表单的解决方案已经here

我有一个具有反应形式的库，我正在尝试使用 ng-template 和 ng-container(A 行)插入表单输入。

库组件

html

<form [formGroup]="mainForm">
  <input type="text" formControlName="inside">
  <ng-container [ngTemplateOutlet]="template"></ng-container> //line A
</form>

TS:

export class LibraryComponent implements OnInit {

@Input() template;
  mainForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.mainForm = this.formBuilder.group({
      inside: ['inside'],
      outside: ['outside'],
    });

  }

}

应用组件

<app-library [template]="outer"></app-library>


<ng-template #outer>
      <input type="text" formControlName="outside">
</ng-template>

这样做时，我得到 错误 :

preview-d2335ca5bdb955611c1cb.js:1 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.ReactiveErrors.controlParentException (reactive_errors.ts:14)
    at FormControlName._checkParentType (form_control_name.ts:272)
    at FormControlName._setUpControl (form_control_name.ts:277)
    at FormControlName.ngOnChanges (form_control_name.ts:207)
    at checkAndUpdateDirectiveInline (provider.ts:208)
    at checkAndUpdateNodeInline (view.ts:429)
    at checkAndUpdateNode (view.ts:389)
    at debugCheckAndUpdateNode (services.ts:431)
    at debugCheckDirectivesFn (services.ts:392)
    at Object.eval [as updateDirectives] (VM1408 AppComponent.ngfactory.js:41)

任何帮助将不胜感激。

Stackblitz

Answer 1

我真的不知道你想做什么，但简单地将表单作为 ngTemplateOutletContext 传递并使用 let 获取它

你的 library.component

 <ng-container [ngTemplateOutlet]="template" 
               [ngTemplateOutletContext]="{form:mainForm}">
 </ng-container>

你的模板

<ng-template #outer let-form=form>
   <input type="text" [formControl]="form.get('outside')">
</ng-template>

看到我们正在使用 [formControl]不是 formControlName ，这就是原因，因为我们需要通过表单