Adding Default Value To Text Input Angular 2

Question

Background

I have a form with an input field containing the user's email address. I am using interpolation to add the email to the placeholder field.

Problem

I do not want the user to be able to change the email address in this field. I only want them to be able to see it. But I do want it to post with the form.

Question

I keep trying different ways and no matter what the form does not post the email. How can I bind it so that it will actually post the email address when the form is submitted?

Examples

I tried with readonly. That way they would not be able to change it.

 <input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}" readonly>

I tried without readonly just to see if it would work if I do not add any restriction flags.

 <input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}">

I know the email is accessible because I am adding it to the placeholder field and it shows up in the form. It just wont post.

May be you can add one more html "hidden" control , with the same interpolation.. not sure if that meets your requirement. — refactor
– refactor, Commented Nov 30, 2016 at 7:30
Maybe of some help : stackoverflow.com/questions/39593725/… — S M
– S M, Commented May 9, 2023 at 6:34

Günter Zöchbauer · Accepted Answer · 2016-11-30 07:10:07Z

11

The default value will be the value assigned to personal.email.

Alternatively you can bind to a different property

[(ngModel)]="personalEmail"

and assign a default value to personalEmail and on submit update persona.email in code or use

[ngModel]="personalEmail" (ngModelChange)="personal.email = $event"

to get the initial value from personalEmail and update personal.email when changes happen

This might also work (not tried)

[ngModel]="personal.email || 'defaultValue'" (ngModelChange)="personal.email = $event"

to only get 'defaultValue' assigned if personal.email is null

answered Nov 30, 2016 at 7:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

IKavanagh · Accepted Answer · 2018-05-16 09:47:55Z

-1

Here model is personal.email and the default value is auth.user.email

<input type="text" class="form-control" id="email" [(ngModel)]="personal.email = auth.user.email" name="email" #email="ngModel">

edited May 16, 2018 at 9:47

IKavanagh

6,20711 gold badges46 silver badges49 bronze badges

answered May 16, 2018 at 9:25

Asha Joshi

878 bronze badges

1 Comment

Michael McKenna Over a year ago

"Parser Error: Bindings cannot contain assignments at column 8 in [personal.email = ''] "

Collectives™ on Stack Overflow

Adding Default Value To Text Input Angular 2

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related