Conditional ngModel in Angular2

by

I would do it like:

[ngModel]="phone_numbers && phone_numbers[0]?.full_number"
(ngModelChange)="phone_numbers?.length && phone_numbers[0].full_number=$event"

Why?

[(ngModel)] is expanded to [ngModel] (Input) and (ngModelChange)(Output).

I passed

phone_numbers && phone_numbers[0]?.full_number

to input to ensure that we have phone_numbers property in our component class and it has at least one item. And i also use here safe navigation operator

When we type something in input ngModelChange handler is called and i do the same things here for checking undefined value unless i can’t use safe navigation pipe in the assignment ((ngModelChange)="phone_numbers && phone_numbers[0]?.full_number=$event" won’t work)

If you use webstorm and see Must be lValue error then see this answer:

More Related Contents:

  1. Is it necessary to unsubscribe from observables created by Http methods?
  2. How to iterate object keys using *ngFor
  3. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  4. Global Events in Angular
  5. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  6. how to format date in Component of angular 5
  7. Angular2 – Redirect to calling url after successful login
  8. Hide/show individual items inside ngFor
  9. How to get angular2 [innerHtml] to work [duplicate]
  10. How to inject service into class (not component)
  11. How to make directives and components available globally
  12. In Angular, how to add Validator to FormControl after control is created?
  13. How to make a sequence of http requests in Angular 6 using RxJS
  14. Mat-table Sorting Demo not Working
  15. How to clear template cache?
  16. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  17. When to use ‘npm start’ and when to use ‘ng serve’?
  18. Type casting within a template in Angular 2
  19. Angular 5 Reactive Forms – Radio Button Group
  20. How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI
  21. Use OpenLayers 4 with Angular 5
  22. Subscribing to a nested Observable
  23. Angular 2 change event – model changes
  24. Angular 2 Reactive Forms trigger validation on submit
  25. What is the difference between fakeAsync and async in Angular testing?
  26. How to use angular 2 service with Ionic 2?
  27. why lazy loaded module has to import commonModule? Angular 2
  28. Need BrowserAnimationsModule in Angular but gives error in Universal
  29. Angular 2 disable sanitize
  30. Can I use Angular i18n to translate string literals in typescript code

Leave a Comment