ngForm或[formGroup]在格式包装中是未知的

Question

我将formly用作组件生成器(不仅仅用于表单的输入生成)。但是，我有一个名为form的包装器和一个名为input的类型。

包装器：

import { Component } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
import {NgForm} from '@angular/forms';

@Component({
 selector: 'form',
 template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
        <ng-container #fieldComponent></ng-container>
    </form>
 `,
})
export class FormWrapperComponent extends FieldWrapper {
    constructor(){
        super();
    }
    onSubmit(f: NgForm) {
        console.log(f.value);  // { first: '', last: '' }
        console.log(f.valid);  // false
      }
}

输入类型：

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'inputType',
 template: `
 <input type="{{to.type}}" class="{{to.class}}" name="{{to.name}}" ngModel placeholder="{{to.placeholder}}"/>
 `,
})
export class InputComponent extends FieldType {}

我也试过了：

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

但它会返回以下错误：

No directive found with exportAs 'ngForm'.

或

Can't bind to 'formGroup' since it isn't a known property of 'form'.

Answer 1

您是否在ngModule中导入了formModule？

import { FormsModule }   from '@angular/forms';    
@NgModule({
  imports: [
             BrowserModule,

             FormsModule      //<----------make sure you have added this.
           ],
  ....
})

更多信息：TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"