How to handle null variable while dealing with two way data binding in Angular 2+

Question

I am using same component for edit as well as add new entries.

if(this.action='edit'){
    this._PersonnelService.getUsersById(this.selectedperid)
      .subscribe((userdata: Iuser) => { this.personnel = userdata[0]; this.personnel.perid = this.selectedperid;console.log(userdata[0]); }, (error) => {
        this.statusMessage = 'Problem with service. Please try again.'
        console.error(error);
      });
   }
    else{     this.personnel=null}

  }

Which means that if the this.action variable is add this.personnel will be set to null.

Now in HTML I have elements such as :

<input type="text"   class="form-control" name="PerFullName"  
[(ngModel)]="personnel.perfullname" id="fullname ">

I am getting truck load of errors in console. My textboxes aren't visible.
How do I fix this?

try by using undefined instead null

Abel Valdez
– Abel Valdez

2018-04-20 14:43:05 +00:00
Commented Apr 20, 2018 at 14:43 — Abel Valdez
– Abel Valdez, Commented Apr 20, 2018 at 14:43
Possible duplicate of two way binding with elvis-operator

Martin Parenteau
– Martin Parenteau

2018-04-20 14:43:58 +00:00
Commented Apr 20, 2018 at 14:43 — Martin Parenteau
– Martin Parenteau, Commented Apr 20, 2018 at 14:43

Isaac Obella · Accepted Answer · 2018-04-20 15:00:53Z

7

Use the elvis operator ? in your html

<input type="text"   class="form-control" name="PerFullName"  
[ngModel]="personnel?.perfullname" (ngModelChange)="personnel?.perfullname personnel?.perfullname = $event : null" id="fullname ">

and the ?? in your javascript to set defaults incase of null

const j = null
y = j ?? 'Anonymous'

And this was answered previously here two-way-binding-with-elvis-operator.

edited Apr 20, 2018 at 15:00

answered Apr 20, 2018 at 14:40

Isaac Obella

2,6433 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SamuraiJack Over a year ago

As far as I know. Elvis (?) operator does not work with two way binding

Isaac Obella Over a year ago

The elvis operator does work when you use [(ngModel)] as [ngModel]

SamuraiJack Over a year ago

but isnt [ngModel] used for one way binding?

SamuraiJack Over a year ago

it would be great if someone could explain (ngModelChange)="personnel?.perfullname personnel?.perfullname = $event : null" part

Collectives™ on Stack Overflow

How to handle null variable while dealing with two way data binding in Angular 2+

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related