How to use same form or page for insert and update . it edit but cannot insert ?

[ahmedsa...@gmail.com]

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 but not insert  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>  

[Sander Elias]

Hi Amedsa,

This is more on how your server handles the request as that you really need to change anything in your app.

Most backend's need a post to create new content (add) and a put for updating existing data(save)

Regards

Sander