How can I get the id of user in Angular

Question

I faced an issue on my project I'm trying to add a bill in my project. I have a Bill form to complete so for input "name" I searched about users name in DB and I selected one of them so I don't know how can I get the id of the user that I selected can someone help me to solve this issue please by the way I'm using angular 10 this is my first project or just upvote my question

AddFacture.component

 export class AddFacture1Component implements OnInit {
    
      @ViewChild('sample')
      public AutoCompleteObj: AutoCompleteComponent;
    
     
      isSuccessful = false;
      errorMessage = '';
      userList: UserInfo[] = [];
      status: Status[] = [
        {value: 'unpaid', viewValue: 'Unpaid'},
        {value: 'paid', viewValue: 'Paid'}
      ];
    
     
    
     form: FactureInfo = {};
      constructor(private factureService: FactureService, private userService : UserService) { }
    
      ngOnInit(): void {
        this.getUsersData();
      }
     onSubmit() {
     
          this.factureService.addFacture(this.form).subscribe(
            data => {
              console.log(data);
              this.isSuccessful = true;
             
            },
            err => {
              this.errorMessage = err.error.message;
            }
          );
    
        }
    
      
        getUsersData() {
          this.userService.getPublicContent().subscribe(
            data =>  {
    
              this.userList = data;
              
             console.log(data);
            },
            err => {
              console.log("An error has occured !")
            }
          );
        }
        
        public fields: Object = { value: 'nom' };
        public value: string = '';
        public fields1: Object = { value: 'prenom' };
        public value1: string = '';
        // set the placeholder to AutoComplete input
        public waterMark: string = 'e.g. Last name';
        public waterMark1: string = 'e.g. First name';
        // set the height of the popup element
        public height: string = '250px';
        // bind the change event
        public onChange(args: any): void {
            let valueEle: HTMLInputElement = document.getElementsByClassName('e-input')[0] as HTMLInputElement;
            // make empty the input value when typed characters is 'null' in input element
            if (this.AutoCompleteObj.value === "null" || this.AutoCompleteObj.value === null || this.AutoCompleteObj.value === "") {
                valueEle.value = '';
            }
        }
    
    }

AddFacture.html

<div class="container p-5">
    <div class="row">
      <div class="col-md-6 m-auto">
        <h1 class="activities-title text-center mb-5">
          Add a new bill
        </h1>

        <form class="activites"
        form name="form" *ngIf="!isSuccessful"
        name="form"
        (ngSubmit)="f.form.valid && onSubmit()"
        #f="ngForm"
        novalidate>
          <div class="form-group position-relative my-4">
            <input type="text" class="input" required="required" name="num facture"  [(ngModel)]="form.num_facture"
            #num_facture="ngModel"/>
            <span class="highlight" ></span>
            <span class="bar"></span>
            <label>N bill</label>
          </div>
          <div class="form-group position-relative my-4">
            <input type="text" class="input" required="required" name="prix"  [(ngModel)]="form.prix"
            #prix="ngModel"/>
            <span class="highlight" ></span>
            <span class="bar"></span>
            <label>Price</label>
          </div>
          <div class="form-group position-relative my-4">
            <input type="date" class="input" required="required" name="date_facture"  [(ngModel)]="form.date_facture"
            #date_facture="ngModel"/>
            <span class="highlight" ></span>
            <span class="bar"></span>
            
          </div>

          <div class="form-group position-relative my-4">
                    <ejs-autocomplete  #sample [dataSource]='userList' [(value)]='value'
                        [placeholder]='waterMark' [fields]='fields' (change)='onChange($event)'
                        name="nom" [(ngModel)]="form.nom" required #nom="ngModel"></ejs-autocomplete>
             
          </div>
          <div class="form-group position-relative my-4">
                  <ejs-autocomplete id='games' #sample [dataSource]='userList' [(value)]='value1'
                      [placeholder]='waterMark1' [fields]='fields1' (change)='onChange($event)'
                      name="prenom" [(ngModel)]="form.prenom" required #prenom="ngModel"></ejs-autocomplete>
         </div>
        
        
   
          
    
          <div class="btn-box">
            <button class="btn btn-submit" type="submit" name="submit-form">Add to store</button>
          </div>
        </form>
        <div class="alert alert-success" *ngIf="isSuccessful">
           The bill has been added correctly!
           <div class="btn-box">
            <button class="btn btn-submit"  name="submit-form" [routerLink]="['../list-medicine']">Return to the store</button>
          </div>
          </div> 
      </div>
    </div>
  </div>

Answer 1

First of all don't bind value attribute for ejs-autocomplete. Then you just need to set correct fields value to set correct mapping. In your case it can be like this

interface User {
  id: number;
  name: string;
}

...
fields = { value: 'id' };