Comprehensive Analysis of Angular Form Module Import Error: 'There is no directive with "exportAs" set to "ngForm"'

Error Background and Problem Analysis

In Angular 2 RC6, many developers encountered a frequent error during upgrades: There is no directive with "exportAs" set to "ngForm". This error typically appears in component templates using form functionality, especially when attempting to reference form controls using template reference variables.

The error message clearly indicates that Angular cannot locate a directive with the exportAs property set to "ngForm". This usually signifies that the relevant form modules have not been properly imported or configured.

Root Cause: Missing Form Module Configuration

Angular 2 RC6 introduced significant refactoring of the form system. The previous provideForms() and disableDeprecatedForms() functions were removed and replaced with more modular FormsModule and ReactiveFormsModule.

When developers fail to properly import these modules in @NgModule, Angular cannot recognize form directives in templates, leading to various errors including:

• Can't bind to 'ngModel' since it isn't a known property of 'input'
• Can't bind to 'formGroup' since it isn't a known property of 'form'
• There is no directive with "exportAs" set to "ngForm"

Solution: Proper Form Module Configuration

To resolve this issue, form modules must be correctly imported in the application's root module. The specific configuration is as follows:

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

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this configuration:

• FormsModule provides support for template-driven forms
• ReactiveFormsModule provides support for model-driven (reactive) forms
• If the application uses both form types, it's recommended to import both modules

Syntax Migration: From Legacy API to New API

Beyond module configuration issues, another common error is continuing to use deprecated legacy syntax. In Angular 2's new form system:

Legacy Syntax:

<select
    ngControl="actionType"
    #actionType="ngForm"
    id="actionType"
    class="form-control"
    required>

New Syntax:

<select
    ngModel
    name="actionType"
    #actionType="ngModel"
    id="actionType"
    class="form-control"
    required>

Key changes:

• ngControl replaced with ngModel
• #variable="ngForm" replaced with #variable="ngModel"
• name attribute must be added to identify form controls

Form Type Selection and Best Practices

Angular provides two main form implementation approaches, and developers should choose based on specific requirements:

Template-driven Forms

• Suitable for simple form scenarios
• Logic primarily implemented in templates
• Requires importing FormsModule
• Uses ngModel for two-way data binding

Model-driven/Reactive Forms

• Suitable for complex form validation and dynamic forms
• Logic primarily implemented in component classes
• Requires importing ReactiveFormsModule
• Uses FormControl, FormGroup, FormArray

Common Error Patterns and Debugging Techniques

When debugging form-related errors, follow these steps:

1. Check if correct form modules are imported in @NgModule
2. Verify template syntax complies with new version requirements
3. Validate form control definitions in component classes
4. Use Angular DevTools to inspect template parsing results

For ControlGroup and ControlArray migration:

// Legacy version
categoryControlGroups: ControlGroup[] = [];
categories: ControlArray = new ControlArray(this.categoryControlGroups);

// New version  
categoryControlGroups: FormGroup[] = [];
categories: FormArray = new FormArray(this.categoryControlGroups);

Version Compatibility and Upgrade Recommendations

Since Angular 2 RC6, the form system has become relatively stable. Developers are advised to:

• Migrate to new form APIs as soon as possible
• Carefully review official change logs before upgrading
• Use Angular CLI for new projects to ensure latest best practices
• For existing projects, migrate form functionality gradually to avoid massive one-time changes

By properly configuring form modules and adopting new syntax standards, developers can fully leverage Angular's powerful form capabilities while avoiding common configuration errors.