Angular: selected on option of select doesn’t work as excepted while using along with ngModel

by

selected is not supported with [(ngModel)]="selectedUser3".

To make an item selected, the value (for string only) or ngValue property value needs to match the value in selectedUser3.

this.selectedUser3 = this.users[2];

By default only object identity is checked, therefore another object instance with the same properties and values doesn’t match.
You can customize comparison using compareWith

https://angular.io/docs/ts/latest/api/forms/index/SelectControlValueAccessor-directive.html

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>
compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. Ionic 2 Form goes up when keyboard shows
  4. When to use square brackets [ ] in directives @Inputs and when not?
  5. Angular2 – Interaction between components using a service
  6. Reactive forms – disabled attribute
  7. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  8. No provider for AngularFireDatabase, AngularFireAuth
  9. How to implement sleep function in TypeScript?
  10. Testing error case with observables in services
  11. Build Angular2 HTML and TypeScript to a single file
  12. TS2531: Object is possibly ‘null’
  13. Custom ExceptionHandler change detection lag
  14. angular keyvalue pipe sort properties / iterate in order
  15. Angular subscribe elegant
  16. How to allow access outside localhost
  17. Trigger update of component view from service – No Provider for ChangeDetectorRef
  18. Angular – Make multiple HTTP calls sequentially
  19. @types/googlemaps/index.d.ts’ is not a module
  20. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  21. Angular 4+ using Google Analytics
  22. What is the meaning of question mark in expressions in Angular 2?
  23. Merging http observables using forkjoin
  24. What is pipe for in RxJS?
  25. How to throw error from RxJS map operator (angular)
  26. Open/Close sidenav from another component
  27. Angular – How to fix ‘property does not exist on type’ error?
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment