Angular 6: Can't bind to 'FormGroup' s

问题:

I am new to Angular 6 and working on ReactiveForms. Getting this error and unable to compile. I have seen the different solutions and Added the ReactiveFormsModule directive in Imports as suggested in solutions still it is showing the same error. Please Help.

Sharing you the desired code and screenshot of the error. app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SignupFormComponent } from './signup-form/signup-form.component';
import { AuthorsService } from './authors.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent,
    SignupFormComponent,
    CoursesComponent,
    CourseComponent,
    AuthorsComponent,
    FavoriteComponent,
    TitleCasePipe,
    PanelComponent,
    LikeComponent,
    ZippyComponent,
    ContactFormComponent,
    NewCourseFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],

Signup-form.ts

import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });

}

signup-form.html

<form [FormGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
            formControlName="username"
            id="username" 
            type="text" 
            class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
            formControlName="password"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Error Screenshot

回答1:

As mentioned by @srashtisj and @suresh-kumar-ariya, you have to update the convention from FormGroup to formGroup in your HTML form, and everything should be working fine.

FormGroup tracks the same values and status for a collection of form controls.

Learn more about to create form instance at Angular's official Form guide.

回答2:

Please use below HTML

`<form [formGroup]="form">`

The error is there since you are using capital F in [formGroup].

回答3:

Issue is related to [FormGroup], use [formGroup]. Created a stackblitz https://stackblitz.com/edit/angular-xbp9fc

回答4:

You can use FormBuilder as this

import { Validators, FormBuilder, FormGroup, FormControl , ReactiveFormsModule } from '@angular/forms';
constructor(private builder: FormBuilder){}

 public complexForm: FormGroup = this.builder.group({
  'firstname' : '',
  'lastname': '',
});

In Html

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">

 <div class="form-group" >
       <label>First Name:</label>
       <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
  </div>
</form>