Conditional ngModel in Angular2

Question

I have a requirement, I need to bind phone number to ngModel only if it\'s present. My code is as follows:

Answer 1

For such binding expressions you need to split the property and event binding like:

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

Answer 2

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:

• Webstorm: What does "Must be lvalue" mean