User696604810 posted
problem
How to use same form or page for insert and update . it edit but cannot insert ?
I have component name employees used for edit record
i need to use it for insert but cannot do that .
it load data on case of passing record for edit or not meaning i need to prepare this form for two purpose insert and edit
so that please how to modify it for insert also ?
export class EmployeesComponent{
employees = {}
empformlabel: string = 'Add Employee';
empformbtn: string = 'Save';
constructor(private formBuilder: FormBuilder ,private router: Router , private api:ApiService,private toastr: ToastrService){}
addForm: FormGroup;
btnvisibility: boolean = true;
ngOnInit() {
this.addForm = this.formBuilder.group({
employeeId: [],
employeeName: ['', Validators.required],
branchCode: ['', [Validators.required, Validators.maxLength(2)]]
});
let empid = localStorage.getItem('editEmpId');
console.log(empid) ;
if (+empid > 0) {
console.log("success") ;
this.api.getEmployeeById( +empid).subscribe(data => {
this.addForm.patchValue(data);
console.log(data);
})
this.btnvisibility = false;
this.empformlabel = 'Edit Employee';
this.empformbtn = 'Update';
}
}
onSubmit() {
console.log('Create fire');
this.api.createEmployee(this.addForm.value)
.subscribe(data => {
this.router.navigate(['employeelist']);
},
error => {
alert(error);
});
}
onUpdate() {
console.log('Update fire');
this.api.updateEmployee(this.addForm.value).subscribe(data => {
this.router.navigate(['employeelist']);
},
error => {
alert(error);
});
}
}
<div class="col-md-6">
<h2 class="text-center">{{empformlabel}}</h2>
<form [formGroup]="addForm" novalidate class="form">
<div class="form-group">
<label for="employeeId">employee Id:</label>
<input type="number" formControlName="employeeId" placeholder="employeeId" name="employeeId" class="form-control" id="employeeId">
</div>
<div class="form-group">
<label for="branchCode">Branch Code:</label>
<input type="number" formControlName="branchCode" placeholder="branchCode" name="branchCode" class="form-control" id="branchCode">
</div>
<div class="form-group">
<label for="employeeName">Employee Name:</label>
<input formControlName="employeeName" placeholder="Employee Name" name="employeeName" class="form-control" id="employeeName">
<div class="alert alert-danger" *ngIf="addForm.get('employeeName').hasError('required') && addForm.get('employeeName').touched">
Employee Name is required
</div>
</div>
<button class="btn btn-success" [disabled]='addForm.invalid' *ngIf="btnvisibility" (click)="onSubmit()">Save</button>
<button class="btn btn-success" [disabled]='addForm.invalid' *ngIf="!btnvisibility" (click)="onUpdate()">Update</button>
<p>Form value: {{ addForm.value | json }}</p>
</form>
</div>
