Home > Software engineering >  Can't bind to 'formGroup' in Angular
Can't bind to 'formGroup' in Angular

Time:08-24

My Issue is: I am trying to make what should be a very simple form in my Angular application, but no matter what, it never works.

Why am I getting that error? Am I missing something?

login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    SigninComponent,
    SignupComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    ReactiveFormsModule,
    FormsModule
  ],
  exports:[
    SigninComponent,
    SignupComponent
  ]
})
export class LoginModule { }

login.component.ts

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

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.scss']
})
export class SigninComponent implements OnInit {
  signinForm:any;
  constructor(private fb:FormBuilder) { }

  ngOnInit(): void {
    this.signinForm = new FormGroup({
      email : new FormControl(''),
      password : new FormControl('')
    })

  }
}

login HTML

<form  [formGroup]="signinForm">
          <label for="email" >Email</label>
          <input type="text"  id="email" value="" formControlName="email" placeholder="Enter your email id">
          <label for="password" >Password</label>
          <input type="password"  id="password" formControlName="password" placeholder="Enter your password">
          <button type="submit" >Submit</button>
    </form>

CodePudding user response:

You can use form builder to create a form.

  basicForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.basicForm = this.formBuilder.group({
      email : new FormControl(''),
      password : new FormControl('')
   })
 }
onFormSubmit(){
 const value =this.basicForm.value;
}

In HTML

<form  [formGroup]="signinForm">
          <label for="email" >Email</label>
          <input type="text"  id="email" value="" formControlName="email" placeholder="Enter your email id">
          <label for="password" >Password</label>
          <input type="password"  id="password" formControlName="password" placeholder="Enter your password">
          <button (click)=onFormSubmit() >Submit</button>
    </form>
  • Related