MarkJ
MarkJ

Reputation: 411

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

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>

Upvotes: 0

Views: 835

Answers (3)

Dmidecode
Dmidecode

Reputation: 66

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">

Upvotes: 0

Ashok
Ashok

Reputation: 753

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"

Upvotes: 1

Nakov
Nakov

Reputation: 58

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

Upvotes: 0

Related Questions