Form value in a select-CodePudding

I have an angular page like:

 catClient: any = [
    [1, 'VALUE1', 'DescriptionValue1', true],
    [2, 'VALUE2', 'DescriptionValue2', true],
  ];
  selectedCategory: string;
  customer = {
    baseTypeIdentifier: '', // if isNewCustomer = false, baseTypeIdentifier will be for example: VALUE1 for BE
  };

    // customer = {
    //  baseTypeIdentifier: 'VALUE1',
    //  };
  isNewCustomer: boolean = true;

  selectCustomerType(newVal) {
    console.log('newVal ', newVal);
    console.log('catCliente ', this.catClient);
    for (let i = 0; i < this.catClient.length; i  ) {
      if (newVal == this.catClient[i][0]) {
        this.selectedCategory = this.catClient[i][2];
        console.log('selectedCategory ', this.selectedCategory);
        this.customer.baseTypeIdentifier = this.selectedCategory;
      }
    }
  }
}

and html:

<div>
  <select
    *ngIf="isNewCustomer"
    
    [ngModelOptions]="{ standalone: true }"
    [(ngModel)]="customer.baseTypeIdentifier"
    (ngModelChange)="selectCustomerType($event)"
    appTab
    placeholder="SelectValue "
    tabIndex="1"
    [disabled]="!isNewCustomer"
  >
    <option value="-1" disabled="">Select Value</option>
    <option
      *ngFor="let cat of catClient"
      name="fieldName"
      ngDefaultControl
      [value]="cat[0] | number"
    >
      {{ cat[1] }}
    </option>
  </select>
</div>

https://stackblitz.com/edit/angular-ivy-u5egtt?file=src/app/app.component.html

I have a problem here, if isNewCustomer = true I have to choose the value from the select (but I have to select 2 time to appears) while if isNewCustomer = false I should show the value in customer.baseTypeIdentifier but it doesn't work.

How can I do?

CodePudding user response：

you issue is with the, look at the line which is commented which starts with @@@.

I think by assigning it by the text and not by the value, this should solve your issue

selectCustomerType(newVal) {
    console.log('newVal ', newVal);
    console.log('catCliente ', this.catClient);
    for (let i = 0; i < this.catClient.length; i  ) {
      if (newVal == this.catClient[i][0]) {
        this.selectedCategory = this.catClient[i][2];
        console.log('selectedCategory ', this.selectedCategory);
        this.customer.baseTypeIdentifier = newVal;
      }
    }
  }

Test here