Angular 10: Reactive Forms is not working

Question

I have CURD application in Angular 10. Where I have use simple user form to insert data in database. For the database purpose I have used Microsoft Visual studio. The error i am getting in user form's olny. I think i have this error because of recativeforms. Can you guide how can i properly use Reactiveforms in my angular project.

As there are similar questions, i try to solve but the same error.

version[angular 10]

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {EmployeeService} from './employee.service';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeComponent } from './employee/employee.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [EmployeeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

employee.component.html

<div class="container mt-lg-5 maindiv">
<h1 class="text-center mb-5 text-decoration-underline"><mark>Employee Registration</mark></h1>
<div class="row">
<div class="col-sm-6">
<form [FormGroup]="employeeForm" (ngSubmit)="onFormSubmit(employeeForm.value)">
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="formGroupExampleInput">First name</label>
     <input type="text" class="form-control" formControlName="FirstName" id="formGroupExampleInput" placeholder="Your first name">
    </div>
    <div class="form-group col-md-6">
     <label for="formGroupExampleInput">Last name</label>
     <input type="text" formControlName="LastName" class="form-control" id="formGroupExampleInput" placeholder="Your last name">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Gender</label>
    <input formControlName="Gender" type="text" class="form-control" id="inputAddress" placeholder="gender">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Designation</label>
    <input type="text" formControlName="Designation" class="form-control" id="inputAddress2" placeholder="degisnation">
  </div>
  <div class="form-row">
   
      <label for="inputEmail4">Email</label>
      <input type="email" formControlName="Email" class="form-control" placeholder="your Email" id="inputEmail4">
    </div>
   
     <div class="form-row">
    <div class="form-group col-md-12">
     <label for="inputAddress">Address</label>
    <input type="text" formControlName="Address" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
   
 
    
  </div>
  <button [disabled]="!employeeForm.valid" type="submit" class="btn btn-primary">Sign in</button>
  <button type="reset" (click)="resetForm()" class="btn btn-dark">Reset </button>
</form>
</div>

employee.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder,Validators} from '@angular/forms';
import {observable, Observable} from 'rxjs';
import {EmployeeService} from '../employee.service';
import {Employee} from '../employee';
import { TitleCasePipe } from '@angular/common';


@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
  datasaved = false;
  employeeForm:any;
  allEmployees:Observable<Employee[]>;
  employeeIdToUpdate=null;
  massage=null;

  constructor(private formbuilder:FormBuilder,private employeeService:EmployeeService) { }

  ngOnInit(): void {
    this.employeeForm=this.formbuilder.group({
      FirstName:['',[Validators.required]],
      LastName:['',[Validators.required]],
      EmailId:['',[Validators.required]],
      Designaion:['',[Validators.required]],
      Gender:['',[Validators.required]],
      Address:['',[Validators.required]],
    });
    this.loadAllEmployees();
  }

  loadAllEmployees()
  {
    this.allEmployees=this.employeeService.getAllEmployee();
  }

  onFormSubmit()
  {
    this.datasaved=false;
    let employee = this.employeeForm.value;
    this.CreateEmployee(employee);
    this.employeeForm.reset();
  }

  CreateEmployee(employee:Employee)
  {
    if(this.employeeIdToUpdate==null)
    {
      this.employeeService.createEmployee(employee).subscribe(
        ()=>{
          this.datasaved=true;
          this.massage="Record saved successfully";
          this.loadAllEmployees();
          this.employeeIdToUpdate=null;
          this.employeeForm.reset();
        }
      );
    }else
    {
      employee.id=this.employeeIdToUpdate;
      this.employeeService.UpdateEmployee(employee)
      .subscribe(()=>{
        this.datasaved=true;
          this.massage="Record updated  successfully";
          this.loadAllEmployees();
          this.employeeIdToUpdate=null;
          this.employeeForm.reset();

      });
    }
  }


  loadEmployeeToEdit(employeeId:string)
  {
    this.employeeService.getEmployeeById(employeeId).subscribe(employee=>{
      this.massage=null;
      this.datasaved=false;
      this.employeeIdToUpdate=employee.id;
      this.employeeForm.controls['FirstName'].setvalue(employee.Firstname);
      this.employeeForm.controls['LastName'].setvalue(employee.Lastname);
      this.employeeForm.controls['EmailId'].setvalue(employee.Emailid);
      this.employeeForm.controls['Designation'].setvalue(employee.Designation);
      this.employeeForm.controls['Gender'].setvalue(employee.Gender);
      this.employeeForm.controls['Address'].setvalue(employee.Address);
    });
  }


  deleteEmployee(employeeId:string)
  {
    this.employeeService.DeleteEmployeeById(employeeId)
    .subscribe(()=>{
          this.massage="Record deleted successfully";
          this.loadAllEmployees();
          this.employeeIdToUpdate=null;
          this.employeeForm.reset();

    })
  }

  resetForm()
  {
    this.employeeForm.reset();
    this.massage=null;
    this.datasaved=false;
  }
}

The error i have got

Expected 0 arguments, but got 1.

9 <form [FormGroup]="employeeForm" (ngSubmit)="onFormSubmit(employeeForm.value)">
                                                            ~~~~~~~~~~~~~~~~~~

  src/app/employee/employee.component.ts:11:16
    11   templateUrl: './employee.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component EmployeeComponent.
src/app/employee/employee.component.html:9:7 - error NG8002: Can't bind to 'FormGroup' since it isn't a known property of 'form'.

9 <form [FormGroup]="employeeForm" (ngSubmit)="onFormSubmit(employeeForm.value)">
        ~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/employee/employee.component.ts:11:16
    11   templateUrl: './employee.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component EmployeeComponent.

Can you help why this error occur

Thankyou!!!!

Answer 1

You can't reach the value of ReactiveForm on template like you did.

Just submit your form without any arguments and reach it on the ts file. And also the formGroup directive is not titleCase. It is camelCase, so you need to change [FormGroup]="..." to [formGroup]="..."

employee.component.html

<form [formGroup]="employeeForm" (ngSubmit)="onFormSubmit()">

employee.component.ts

onFormSubmit() {
    const {value, valid} = this.employeeForm;
    if(valid) {
         console.log(value);
        // do something here.
    }
}