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

Posted 2023-03-13

【中文标题】ngForm 或 [formGroup] 在 formly 包装器中是未知的

【英文标题】：ngForm or [formGroup] are not known inside a formly wrapper

【发布时间】：2021-06-13 13:20:54

【问题描述】：

我将 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'.

【问题讨论】：

你在ngModule中导入formModule了吗？

@RameshRajendran 是的，我导入了它。有没有办法将它导入到 formlyModule 中？

【参考方案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"

【讨论】：

是的，我已经导入了。