Input value two-way data binding not updating with empty string

Question

I'm using Angular 8.1.3. Here's my HTML...

<mat-form-field floatLabel="never">
  <input matInput placeholder="Address Line 2" [value]="addressLine2" [disabled]="disableAddressFields">
</mat-form-field>

I have the following in my TypeScript file.

addressLine2 = '';

Changing to a non-empty string is reflected in the HTML.

this.addressLine2 = 'some value';

But setting it back to an empty string does is not reflected in the HTML, despite the value being empty ('') in the TypeScript (confirmed by printing to console).

this.addressLine2 = '';

It seems that once a non-empty string is set in the TypeScript, an empty string that is set is not reflected in the HTML. I'm kind of lost here; any help would be greatly appreciated.

alt255 · Accepted Answer · 2019-08-23 21:25:56Z

2

For two way binding to work you need to use [(ngModel)]. Import angular forms add add [(ngModel)] to your code.

 <input matInput placeholder="Address Line 2" [(ngModel)]="addressLine2" [disabled]="disableAddressFields">

In your current code you are binding input's value property to addressLine2 so it is working as expected. To also get data back from input field you need to use ngModel

  <input matInput placeholder="Address Line 2" [value]="addressLine2" [disabled]="disableAddressFields">

edited Aug 23, 2019 at 21:25

answered Aug 23, 2019 at 21:08

alt255

3,6262 gold badges17 silver badges22 bronze badges

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

3 Comments

Bailey Stein Over a year ago

Ah, that fixes it! Thank you for the detailed answer. :)

Martin Parenteau Over a year ago

@alt255 - Why do you say "In your current code you are binding input's value property to disableAddressFields"?

alt255 Over a year ago

@ConnorsFan it was a typo 😅. fixed it

Barkha · Accepted Answer · 2019-08-23 21:08:22Z

0

Instead of [value]="addressline2", it should be [(ngmodel)]="addressline2" for two way binding

answered Aug 23, 2019 at 21:08

Barkha

7223 silver badges8 bronze badges

1 Comment

mwilson Over a year ago

Not if the OP is using forms. Using [(ngModel)] within ngForm was removed in v7.

Collectives™ on Stack Overflow

Input value two-way data binding not updating with empty string

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related