Resolving "There is no directive with exportAs set to ngForm" Error in Angular

Problem Analysis

During Angular development, many developers encounter the "There is no directive with 'exportAs' set to 'ngForm'" error message. This error typically occurs when using template-driven forms, especially when syntax like #loginForm="ngForm" is used in templates.

Root Cause

The fundamental cause of this error is that FormsModule has not been properly imported into the application's root module. The ngForm directive is one of the core functionalities provided by FormsModule, enabling the creation of local references to forms through the exportAs mechanism in templates.

Solution

To resolve this issue, correctly import FormsModule in the application's root module. Here is a complete configuration example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule  // Ensure this line is added
  ],
  declarations: [
    // Component declarations
  ],
  bootstrap: [
    // Root component
  ]
})
export class AppModule { }

Code Example Analysis

Let's demonstrate the correct implementation through a complete login component example:

// login.component.ts
import { Component } from '@angular/core';
import { Http, Headers } from '@angular/http';

@Component({
  moduleId: module.id,
  selector: 'login-cmp',
  templateUrl: 'login.component.html'
})
export class LoginComponent {
  constructor(private http: Http) {}

  authenticate(data: any) {
    // Authentication logic implementation
    console.log('Form data:', data);
  }
}

<!-- login.component.html -->
<form #loginForm="ngForm" (ngSubmit)="authenticate(loginForm.value)">
  <input type="text" name="username" ngModel required>
  <input type="password" name="password" ngModel required>
  <button type="submit">Login</button>
</form>

Importance of Module Configuration

FormsModule provides all necessary directives and functionalities for Angular template-driven forms. Without this module, Angular cannot recognize directives like ngForm and ngModel in templates, leading to compilation errors.

Common Configuration Mistakes

Frequent configuration errors made by developers include:

• Forgetting to add FormsModule to the imports array
• Adding FormsModule to the wrong module
• Module import issues caused by version mismatches

Version Compatibility Notes

In Angular 2.0.0-rc.6 version, form functionalities have been separated from the core module into the independent @angular/forms package. Ensure the package.json includes the correct version dependencies:

"dependencies": {
  "@angular/forms": "2.0.0-rc.6"
}

Conclusion

By correctly importing FormsModule, developers can fully utilize Angular's template-driven forms capabilities. The exportAs feature of the ngForm directive provides powerful local reference capabilities for form operations, significantly simplifying form handling complexity.