没有将“exportAs”设置为“ngForm”的指令

Posted 2023-02-22

【中文标题】没有将“exportAs”设置为“ngForm”的指令

【英文标题】：There is no directive with "exportAs" set to "ngForm"

【发布时间】：2017-05-18 17:49:43

【问题描述】：

当我尝试测试LoginComponent时出现以下错误

PhantomJS 2.1.1 (Linux 0.0.0): Executed 3 of 55 (1 FAILED) (0 secs / 0.307 secs)
PhantomJS 2.1.1 (Linux 0.0.0) LoginComponent should create FAILED
Failed: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("iv class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
          <form (ngSubmit)="login(f)" [ERROR ->]#f="ngForm">
            <div class="card card-login">
              <div class="card-header text-cen"): LoginComponent@5:38

我的组件看起来像的一部分，

login.component.ts

export class LoginComponent 

  isBusy: boolean = false;
  user: User;

  constructor(
    private router: Router,
    private notificationService: NotificationService,
    private authService: AuthenticationService,
    private sessionService: SessionService,
  )  
  ....

相应的规范看起来像，

login.component.spec.ts

describe('LoginComponent', () => 
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async(() => 
    let routerStub = new RouterStub();

    TestBed.configureTestingModule(
      imports: [HttpModule],
      declarations: [,
        LoginComponent
      ],
      providers: [
        provide: Http, useFactory: (backend, options) => 
          return new Http(backend, options);
        ,
        deps: [MockBackend, BaseRequestOptions]
      ,
       provide: Router, useClass: class  navigate = jasmine.createSpy("navigate");  ,
        MockBackend,
        BaseRequestOptions,
        AuthenticationService,
        SessionService,
        NotificationService
      ],
      schemas: [NO_ERRORS_SCHEMA],
    )
    .compileComponents();
  ));

  beforeEach(() => 
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

  it('should create', () => 
    expect(component).toBeTruthy();
  );
);

似乎无法使用上述提供者、声明等创建假组件。像other's said，我已经在@NgModule 装饰器中包含了FormsModule。

【参考方案1】：

不确定您将它添加到哪个 @NgModule 装饰器中，但我认为应该添加它

 TestBed.configureTestingModule(
      imports: [HttpModule, FormsModule],

【讨论】：

我想动态地为一个元素添加一个属性.. 所以我尝试了.. <input type="input.type" name="input.name" class="form-control" [attr.disabled]="input.disabled" value="input.value"> 但它生成了<input .. disable="true"> 但我想要<input disable> 基于input.disabled 的布尔值

您不能只使用 Angular2 绑定创建 disabled，但 disabled 和 disabled="true" 应该无关紧要。要删除它，您需要null，因为false 将导致disabled="false" 类似于disabled。 [attr.disabled]="input.disabled ? true : null" 应该做你想做的事。

感谢这个答案的帮助。

谢谢伙计，只是为了像我这样的超级愚蠢的家伙，您确实需要在文件顶部添加 import FormsModule from '@angular/forms'; 的 FormsModule

@superjisan 是的，一切都需要导入，所以我没有明确添加。我假设 IDE 建议无论如何添加导入，但这可能取决于 IDE。

【参考方案2】：

我遇到了完全相同的问题，我通过在 app.module.ts 和组件所在的子模块（在我的例子中是 core.module.ts）中导入 FormsModule 来解决它。

我遵循 Angular 风格指南并将登录组件放在核心模块中，所以我的登录组件的文件夹结构是：app/src/core/login/login.component.ts

我不需要像其他人建议的那样导入 ReactiveFormsModule。

【参考方案3】：

被屏蔽为接受的答案目前已过时，因为 HttpModule 目前已被弃用。另一种方法是使用 HttpClientTestingModule：

 TestBed.configureTestingModule(
      imports: [HttpClientTestingModule, FormsModule],