crud operations

Question

Vishal Joshi · Answer

You can get value like the below code onFormSubmit(value:any) { // sample to get value of form var empName = value.EmpName; }

Vishal Joshi · Answer

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

Vishal Joshi · Answer

Please try the below defination for onFormSubmit in .ts file. onFormSubmit(value:any) { // your code } In HTML you can use the below code Thanks

Sruthi Desai · Answer

Thank You Soo much it worked.

Tuhin Paul · Answer

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; }

Sruthi Desai · Answer

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

Sruthi Desai · Answer

Showing like this sir

Sruthi Desai · Answer

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

Sruthi Desai · Answer

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

Sruthi Desai · Answer

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; } }

Sruthi Desai · Answer

version 18.12.1

Vishal Joshi · Answer

Please share the version of angular.

Sruthi Desai · Answer

But after removing parameter the details or not getting submitted.

crud operations

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (13)