Displaying Textbox Information and updating in Angular and TS

Question

Fairly new to stack overflow but I needed assistance.

I did a backend and the API is working fine after tests from postman.

I can add employee and I can retrieve employee. However, what I am trying to do is, when I click on the card, I want the card I clicked on to display information about the employee in the textboxes and allow me to change and update. I am failing to retrieve and update my HTML. Please help.

In MY TS, I have this:

updateEmployee(employee: Employee){this.load = true;this.users.updateEmployee(employee).subscribe(res => {this.load = false;this.onPrimaryOutline("Employee has been updated");this.getEmployee();},err=>{console.log(err);this.load = false;this.onErrorOutline("Failed to update Employee, please try again");});}

onOpenModal(employee: Employee, mode: string): void {const containerUpdate = document.getElementById('update-container');const button = document.createElement('button');button.type = 'button';button.style.display = 'none';button.setAttribute('data-toggle', 'modal');if (mode === 'save'){this.updateEmployee = employee;button.setAttribute('data-target', '#update-container');}if (mode === 'delete'){button.setAttribute('data-target', '#deleteEmployeeMasterModal');}  containerUpdate.appendChild(button);
  button.click()}

service:

public updateEmployee(employee: Employee): Observable<Employee>{     return this.http.put<Employee>(${this.updateEmployee_url}/employee/update, employee)   }

HTML:

<div class="card" id="update-container" [hidden]="!showForm" data-toggle="modal" data-target="#updateEmployeeModal"><span aria-hidden="true">×</span><ng-template #template><ngx-loading-x [show]="load"></ngx-loading-x><div NgxLoadingXBlur [show]="load"><div class="modal-header">
  <div>
  <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
   <span aria-hidden="true">&times;</span> </button>
 </div>
 <div class="modal-body">
  <div class="card mb-4">
   <div class="card-body">
     <h6 class="mb-4">{{ 'forms.external-components' | translate }} 
     </h6>                                                                                                                              
      <form [formGroup]="commonForm" #editForm="ngForm" (ngSubmit)="updateEmployee()" novalidate class="tooltip-label-right">
            <div class="form-group">
           <label>Name</label>
           <input type="text" class="form-control" name="name" ngModel="{{editEmployee?.name}}" formControlName="name">
           <small>Only letters and at least 2 characters</small>
           <div *ngIf="commonForm.get('name')?.errors?.required && !form.submitted" class="invalid-tooltip">Name is required!</div>
      </div>
      <div class="form-group">
           <label>Surname</label>
           <input type="text" class="form-control" name="airlineCode" ngModel="{{editEmployee?.surname}}" formControlName="surname">
           <small>Only letters and at least 2 characters</small>
           <div *ngIf="commonForm.get('surname')?.errors?.required && !form.submitted" class="invalid-tooltip">Code is required!</div>
         </div>
         <div class="form-group">
           <label>Number</label>
           <input type="text" class="form-control" name="phonenumber" ngModel="{{editEmployee?.phonenumber}}" formControlName="phonenumber">
           <div *ngIf="commonForm.get('phonenumber')?.errors?.required && !form.submitted" class="invalid-tooltip">Number is required!</div>
         </div>
         <button class="btn btn-primary" type="submit" [disabled]="!commonForm.valid" (click)="updateEmployee(employee, Employee)" (click)="modalRef.hide()">Update</button>
         <button type="button" class="btn btn-danger" style="display: inline-block;margin-left: 20px;" (click)="delete()" (click)="modalRef.hide()">Delete</button>
       </form>
   
     </div>
   </div>
   </div>
</div>

I just need to retrieve the values for the specific card when I click on it and be able to update it. But I cannot see what I am omitting. Inspect element says:

ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead