Angular7:Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ [Solved]

Can’t bind to ‘form Group’ since it isn’t a known property of ‘form’

Error message:

Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("</p>
<form [ERROR ->][formGroup]="loginForm">
  <label>
"): ng:///AppModule/LoginComponent.html@7:6

Cause of the problem:

No form module was imported

Solution:

Import the reactiveformsmodule module from @ angular/forms 

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Modified code instance

login. Component. TS code:

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  
  message: string;
  public userId: number = 0;
  public storeId: number = 0;

  constructor(
    private fb: FormBuilder,
    public router: Router
  ) {
    this.setMessage();
  }

  loginForm = this.fb.group({
    username: ['', Validators.required],
    userpass: ['', Validators.required],
    captcha:  [''],
  });

  onLogin() {
    console.log(this.loginForm)
  }
}

login.component.html codes:

<form [formGroup]="loginForm">
  <label>
    account: <input type="text" formControlName="username">
  </label>
  <label>
    password: <input type="text" formControlName="userpass">
  </label>
  <button type="button" (click)="onLogin()" [disabled]="!loginForm.valid">Submit</button>
</form>

Please note that

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './auth/login/login.component';
// Introduction of the Forms module
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    DashboardComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    UsersModule,
    // Import Form module
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Similar Posts: