How to hide "null" in the input field Angular 2?

Question

When a value of null comes to the JSON, it appears in the input field. How can I hide it and not display it? And to show only the name in the meaning?

Screenshot of fields showing null

<div>
    <input type="hidden" 
        name="roleUserHidden-{{roleIndex}}" 
        #roleUser="ngModel" 
        [ngModel]="role.UserId === 'null' ? '' : role.UserId " />
    <input [disabled]="!permissions.canEdit" 
        class="form-control" 
        auto-complete 
        [ngModel]="role === 'null' ? '' : role" [source]="usersForAllocationSource.bind(this)" 
        list-formatter="Name" 
        name="roleUserAuto-{{roleIndex}}" 
        #roleUserVisible="ngModel" 
        (valueChanged)="usersForAllocationSelected(role, $event, roleUser)" 
        display-property-name="UserName" 
        [accept-user-input]="false" 
        (ngModelChange)="onRoleUserChange($event, role)" 
        [min-chars]="2">
</div>

stackoverflow.com/a/43094103/495157 - uses a directive

JGFMK
– JGFMK

2017-08-03 06:14:03 +00:00
Commented Aug 3, 2017 at 6:14 — JGFMK
– JGFMK, Commented Aug 3, 2017 at 6:14
It's not supposed to show 'null' unless it's a string.

Rax Weber
– Rax Weber

2017-08-03 06:15:32 +00:00
Commented Aug 3, 2017 at 6:15 — Rax Weber
– Rax Weber, Commented Aug 3, 2017 at 6:15
check for null in ts and assign to the input ngModel

Sreemat
– Sreemat

2017-08-03 06:25:39 +00:00
Commented Aug 3, 2017 at 6:25 — Sreemat
– Sreemat, Commented Aug 3, 2017 at 6:25

Vivek Doshi · Accepted Answer · 2017-08-03 07:07:51Z

4

Simple solution :

<input name='name' [ngModel]="obj?.val">

Another way :

<input name='name' [ngModel]="obj.val ? obj.val  : '' ">

Here is the link to plunker

edited Aug 3, 2017 at 7:07

answered Aug 3, 2017 at 6:15

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

Comments

Jose Zamudio · Accepted Answer · 2017-08-03 06:15:53Z

1

If you want to hide the entire input element you can do *ngIf="value" value being whatever is null...

if you want the value to be an empty string you can do [value]="value === 'null' ? '' : value"

answered Aug 3, 2017 at 6:15

Jose Zamudio

8651 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to hide "null" in the input field Angular 2?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related