I am getting an error in the ts file while working with the authentication part, any guess why I am getting this error in the app.component.ts I am getting error in line no 13 and 14

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators ,FormControl, FormBuilder, AbstractControl} from '@angular/forms';
import { AuthServiceService } from '../auth-service.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  form: FormGroup=this.formBuilder.group({
    email:new FormGroup("",[Validators.required]),
    password:new FormGroup("",[Validators.required])
  });
  

  constructor(private authService:AuthServiceService,private formBuilder: FormBuilder) { }

  ngOnInit(): void {
  }
  initForm(){
    this.form=new FormGroup({
      
    })
  }
  login(){
    if(this.form.valid){
      this.authService.login(this.form.value).subscribe(result=>{
        if(result.success){
          console.log(result);
          alert(result.message);
        }
        else{
          alert(result.message);
        }
      })
    }
  }

}

CodePudding user response：

form: FormGroup=this.formBuilder.group({
    email:new FormControl("",[Validators.required]),
    password:new FormControl("",[Validators.required])
  });

Screenshot of the solution

View the image for better understanding

https://angular.io/guide/reactive-forms

CodePudding user response：

FormGroup is a group of form fields. You have to use FormControl to specify each form field.

    email:new FormControl("",[Validators.required]),
    password:new FormControl("",[Validators.required])