crud operations

You can improve the accpeted answer by doing the following:
Use type annotations to make your code more readable and maintainable. You can specify the types of the function arguments and the return value. 

onFormSubmit(value: {EmpName: string}): void {
  // sample to get value of form
  const empName = value.EmpName;
}

Another improvement is use destructuring to extract values from objects and arrays and assign them to variables. You can use destructuring to extract the EmpName property from the value object. 
 

onFormSubmit({EmpName}: {EmpName: string}): void {
  // sample to get value of form
  const empName = EmpName;
}

'EmpName' is declared but its value is never read.ts(6133)

Showing like this sir

I have shared both ts and html code plzz help sir.

Please try the below defination for onFormSubmit in .ts file.

onFormSubmit(value:any)
{
  // your code
}

In HTML you can use the below code

Thanks

  
    
        
        
  
          CRUD operation in Angular 7 using Web api and Sql Database  
        
      
    


      
        

                

                  
  
                    

                      
                        
                      
                      
                        
                      
                    
                    

                      
                        
                         
                          
                        
                        
                        
                        
                    
  
                    
  
                        
                          
                        
                        
                          
                        
                    
  
                  
  
                  
  
                    
  
                      Gender  
                      

  
                        
                          Male    
                          Female  
                          
                        
                          
                        
                    
  
                    
  
                        
                          
                        
                        
                          
                        
                    
  
                    
  
                        
                          
                        
                        
                          
                        
                    
  
                  
  
                  
  
                    
  
                    
  
                      Submit      
                      Reset  
                    
  
                    
  
                      
  
                        {{massage}}  
                      
  
                    
  
                  
  
                
  
          

  
          
  
              
  
                
Employee Name
  
                
Date Of Birth
  
                
Email Id
  
                
Gender
  
                
Address
  
                
Pine Code
  
                
Edit
  
                
Delete
  
              
  
              
  
                
{{employee.EmpName}}
  
                
{{employee.DateOfBirth | date }}
  
                
{{employee.EmailId}}
  
                
{{employee.Gender ==0? 'Male' : 'Female'}}
  
                
{{employee.Address}}
  
                
{{employee.PinCode}}
  
                
  
                  Edit  
                
  
                
  
                  Delete  
                
  
              
  
            
  
        
  
        
      
    
  

import { Component, OnInit } from '@angular/core';  
import { FormBuilder, Validators } from '@angular/forms';  
import { Observable } from 'rxjs';  
import { EmployeeService } from '../employee.service';  
import { Employee } from '../employee';  
@Component({  
  selector: 'app-employee',  
  templateUrl: './employee.component.html',  
  styleUrls: ['./employee.component.css']  
})  
export class EmployeeComponent implements OnInit {  
  dataSaved = false;  
  employeeForm: any;  
  allEmployees: Observable;  
  employeeIdUpdate = 0;  
  massage = '';  
  constructor(private formbulider: FormBuilder, private employeeService:EmployeeService) { }  
  ngOnInit() {  
    this.employeeForm = this.formbulider.group({  
      EmpName: ['', [Validators.required]],  
      DateOfBirth: ['', [Validators.required]],  
      EmailId: ['', [Validators.required]],  
      Gender: ['', [Validators.required]],  
      Address: ['', [Validators.required]],  
      PinCode: ['', [Validators.required]],  
    });  
    this.loadAllEmployees();  
  }  
  loadAllEmployees() {  
    this.allEmployees = this.employeeService.getAllEmployee();  
  }  
  onFormSubmit() {  
    this.dataSaved = false;  
    const employee = this.employeeForm.value;  
    this.CreateEmployee(employee);  
    this.employeeForm.reset();  
  }  
  loadEmployeeToEdit(employeeId: string) {  
    this.employeeService.getEmployeeById(employeeId).subscribe(employee=> {  
      this.massage = '';  
      this.dataSaved = false;  
      this.employeeIdUpdate = employee.EmpId;  
      this.employeeForm.controls['EmpName'].setValue(employee.EmpName);  
     this.employeeForm.controls['DateOfBirth'].setValue(employee.DateOfBirth);  
      this.employeeForm.controls['EmailId'].setValue(employee.EmailId);  
      this.employeeForm.controls['Gender'].setValue(employee.Gender);  
      this.employeeForm.controls['Address'].setValue(employee.Address);  
      this.employeeForm.controls['PinCode'].setValue(employee.PinCode);  
    });  
  }  
  CreateEmployee(employee: Employee) {  
    if (this.employeeIdUpdate == null) {  
      this.employeeService.createEmployee(employee).subscribe(  
        () => {  
          this.dataSaved = true;  
          this.massage = 'Record saved Successfully';  
          this.loadAllEmployees();  
          this.employeeIdUpdate = 0;  
          this.employeeForm.reset();  
        }  
      );  
    } else {  
      employee.EmpId = this.employeeIdUpdate;  
      this.employeeService.updateEmployee(employee).subscribe(() => {  
        this.dataSaved = true;  
        this.massage = 'Record Updated Successfully';  
        this.loadAllEmployees();  
        this.employeeIdUpdate = 0;  
        this.employeeForm.reset();  
      });  
    }  
  }  
  deleteEmployee(employeeId: string) {  
    if (confirm("Are you sure you want to delete this ?")) {  
    this.employeeService.deleteEmployeeById(employeeId).subscribe(() => {  
      this.dataSaved = true;  
      this.massage = 'Record Deleted Succefully';  
      this.loadAllEmployees();  
      this.employeeIdUpdate = 0;  
      this.employeeForm.reset();  
    });  
  }  
}  
  resetForm() {  
    this.employeeForm.reset();  
    this.massage = '';  
    this.dataSaved = false;  
  }  
}

version 18.12.1

Please share the version of angular.

But after removing parameter the details or not getting submitted.

Thank You Soo much it worked.

Hello Sruthi

Your onSubmit() method does not expect any arguments. But from your html you call it with one argument: onSubmit(serviceForm.value)

I would remove the parameter from html just simply use onSubmit()

Thanks