ngForm 或 [formGroup] 在 formly 包装器中是未知的

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"