HTML "value" field not pre-populating form when using Angular

Question

I'm trying to get a form with the field Exchange already populated as "HELLO". Using value in HTML is not working and the field is showing up blank.

I tried adding autocomplete=off, but that did not work either.

<div class="form-group">

    <label for="AccountRef">Account Ref</label>
        <div class="input-group">
                <input type="text" id="accountref" name="accountref" [(ngModel)]="newAccount.accountRef">
                <div class="input-group-append"></div>
              </div>

    <label for="Client">Client Name</label>
        <div class="input-group">
            <input type="text" id="client" name="client" [(ngModel)]="newAccount.client">
            <div class="input-group-append"></div>
        </div>

    <label for="Exchange">Exchange</label>
        <div class="input-group">
            <input type="text" id="exchange" name="exchange" value ="HELLO" autocomplete="off" [(ngModel)]="newAccount.exchange">
            <div class="input-group-append"></div>
        </div>

</div>

As far as I see, you have additional 'space' after 'value'. Have you tried different browsers? What webkit are you testing on? (M.) — wisiena
– wisiena, Commented Apr 22, 2019 at 18:45
I just tried it with plain HTML (deleted the angular [(ngModel)]=...) and it worked fine. So it's likely something to do with that, if that narrows down your problem at all. — ryan.kom
– ryan.kom, Commented Apr 22, 2019 at 18:46

Ashok · Accepted Answer · 2019-04-22 19:10:05Z

1

since you are using two way binding [(ngModel)]=newAccount.exchange you need to populate value using newAccout.exchange

So in your ts/js file give default value Try this:newAccout.exchange="Hello"

edited Apr 22, 2019 at 19:10

answered Apr 22, 2019 at 18:44

Ashok

7634 silver badges13 bronze badges

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

Comments

Nakov · Accepted Answer · 2019-04-22 18:45:27Z

0

It's working for me. Try another browser or better another IDE -Sublime, Webstorm, Visual Code etc.

answered Apr 22, 2019 at 18:45

Nakov

5810 bronze badges

Comments

Dmidecode · Accepted Answer · 2019-04-22 19:11:15Z

0

As @Ashok said you need to populate 'newAccount.exchange' but if you want to just populate the value html without [(ngModel)] you need 1 way data binding.

<input type="text" id="exchange" name="exchange" [value]="newAccount.exchange" autocomplete="off">

answered Apr 22, 2019 at 19:11

Dmidecode

661 gold badge2 silver badges6 bronze badges

Collectives™ on Stack Overflow

HTML "value" field not pre-populating form when using Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related