如何在Angular 5中使用@angular/forms？解决formGroup绑定报错问题

Hey there, let's fix that error first and then walk through how to use @angular/forms in Angular 5!

This error pops up because you're using the reactive form directive formGroup, but haven't imported the corresponding ReactiveFormsModule in your module. Right now you only have FormsModule imported, which is for template-driven forms.

Update your app.module.ts to add the missing module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
// Import both form modules: FormsModule for template-driven, ReactiveFormsModule for reactive
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { appRoutes } from './app.routing.module'
import { AppComponent } from './app.component';
// Don't forget to import your login component here if it's a separate one
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent // Add your login component to declarations
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
    ReactiveFormsModule // This line fixes the formGroup error
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

A quick reminder: If your login form is in a separate component, make sure it's declared in the declarations array of your module—otherwise Angular won't recognize the directives used in its template.

Angular's form module supports two approaches to building forms, each suited for different use cases:

1. Template-Driven Forms (Great for Simple Forms) #

Relies on FormsModule, with form logic managed directly in the template via directives like ngModel.

Example Login Component Template #

<form #loginForm="ngForm" (ngSubmit)="handleSubmit(loginForm)">
  <div>
    <label>Username:</label>
    <input type="text" name="username" ngModel required>
  </div>
  <div>
    <label>Password:</label>
    <input type="password" name="password" ngModel required>
  </div>
  <button type="submit" [disabled]="!loginForm.valid">Log In</button>
</form>

Example Component Class #

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  handleSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form Data:', form.value);
      // Add your login API call here
    }
  }
}

2. Reactive Forms (Recommended for Complex Forms) #

Relies on ReactiveFormsModule, with form structure and validation defined in the component class using FormGroup, FormControl, and FormBuilder. This approach gives you more control and makes it easier to test form logic.

Example Component Class #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    // Build form with validation rules
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  handleSubmit() {
    if (this.loginForm.valid) {
      console.log('Form Data:', this.loginForm.value);
      // Execute your login logic here
    }
  }
}

Example Component Template #

<form [formGroup]="loginForm" (ngSubmit)="handleSubmit()">
  <div>
    <label>Username:</label>
    <input type="text" formControlName="username">
    <!-- Show validation error -->
    <div *ngIf="loginForm.get('username').invalid && loginForm.get('username').touched">
      Username is required
    </div>
  </div>
  <div>
    <label>Password:</label>
    <input type="password" formControlName="password">
    <!-- Show validation errors -->
    <div *ngIf="loginForm.get('password').invalid && loginForm.get('password').touched">
      <div *ngIf="loginForm.get('password').errors.required">Password is required</div>
      <div *ngIf="loginForm.get('password').errors.minlength">Password must be at least 6 characters</div>
    </div>
  </div>
  <button type="submit" [disabled]="!loginForm.valid">Log In</button>
</form>

内容的提问来源于stack exchange，提问作者fariba.j