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

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>