Angular string interpolation prints empty string on JSON object value

Question

In my typescript class:

user = {
    username: '',
    email: '',
    secret: '',
    gender: '',
    answer: '',
};

i have a button called onSubmit:

onSubmit() {
    this.submitted = true;
    console.log(this.form);
    this.user.username = this.form.value.userData.username;
    console.log(this.user.username);
}

and in my HTML:

<div class="row" *ngIf="submitted">
    <div class="col-xs-12">
        <h3>Your Data</h3>
        <p>Username: {{ user.username }}</p>
    </div>
</div>

The console log clearly prints the value of the user.username and I can see it in the console. But the html just shows:

Your Data

Username:

To edit: the onSubmit is somewhere in my HTML and it works fine because i can see the console output. — John Doe
– John Doe, Commented Feb 20, 2019 at 20:52
The typescript is what I am looking for. Also, read up on this blog.angular-university.io/… — user10747134
– user10747134, Commented Feb 20, 2019 at 20:56

Sergey Mell · Accepted Answer · 2019-02-20 21:15:15Z

3

According to your code https://pastebin.com/1nSHRCPb

The issue had happened because of line 18

    ...
    #user="ngModel">

You've created a template variable user. That's why you get nothing when called user.username in your template.

answered Feb 20, 2019 at 21:15

Sergey Mell

8,0501 gold badge29 silver badges53 bronze badges

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

2 Comments

John Doe Over a year ago

Thank you, this solves the issue. This was really nasty to spot. What made it worse was that I was following along with the tutorial.

Sergey Mell Over a year ago

You've just looked through tired eyes. That happens. Glad, that I could help.

DeborahK · Accepted Answer · 2019-02-20 21:57:16Z

1

The prior reply will solve your issue. I did a stackblitz of it here: https://stackblitz.com/edit/angular-hirffj

But you may be able to simplify your code even further if you use two-way binding.

        <input
         type="text" 
         id="username" 
         class="form-control"
         [(ngModel)]="user.username"
         name="username"
         required>

Then your input element and your user.username property will stay in sync.

Also note that the setValue and patchValue shown in your component code is for reactive forms, not template driven forms. Since you are using template driven forms, if you change to use two-way binding you can set the values into the form just using the object properties:

  suggestUserName() {
    this.user.username = 'Superuser';
  }

edited Feb 20, 2019 at 21:57

answered Feb 20, 2019 at 21:18

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

2 Comments

John Doe Over a year ago

Thank you for the tip, much appreciated!

DeborahK Over a year ago

I have a more complete example using two-way binding here: stackblitz.com/edit/angular-template-forms-deborahk Hope it is helpful.

Collectives™ on Stack Overflow

Angular string interpolation prints empty string on JSON object value

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related