Add default value to input field Angular2

Question

I'm trying to build an angular 2 application, my problem is that i want to give a default value for an input and make it disabled i tried this but it doesn't work.

<div class="form-group">
    <label for="input01">UUID</label>
    <input class="form-control form-control-rounded" id="input01" style="width:600px;margin-left:60px" type="text" [(ngModel)]="beacon.uuid" value="{{uuid}}" name="uuid" disabled>
  </div>

Any solution?

If you don't want to store default value in your model check this aswer — mankers
– mankers, Commented Apr 19, 2017 at 12:19
you should be setting this on the model. did you happen to read the docs...? - angular.io/guide/forms-overview — Emobe
– Emobe, Commented May 16, 2019 at 7:33

Dane · Accepted Answer · 2017-11-23 06:15:14Z

9

If you want to give a default value without two-way binding, use [value]:

<div class="form-group">
  <label for="input01">UUID</label>
  <input id="input01" type="text" [value]="beacon.uuid" class="form-control form-control-rounded" name="uuid" disabled>
</div>

answered Nov 23, 2017 at 6:15

Dane

9,6135 gold badges38 silver badges58 bronze badges

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

Comments

raven · Accepted Answer · 2017-04-19 12:13:56Z

4

Your template:

<div class="form-group">
    <label for="input01">UUID</label>
    <input class="form-control form-control-rounded" id="input01" style="width:600px;margin-left:60px" type="text" [(ngModel)]="beacon.uuid" name="uuid" [disabled]="true">
  </div>

In your component:

ngOnInit() {
  beacon.uuid = "my default value"
}

answered Apr 19, 2017 at 12:13

raven

2,4312 gold badges25 silver badges46 bronze badges

Comments

sainu · Accepted Answer · 2017-04-19 12:14:26Z

0

Try removing the value from input

<div class="form-group">
    <label for="input01">UUID</label>
    <input class="form-control form-control-rounded" id="input01" type="text" [(ngModel)]="beacon.uuid" name="uuid" disabled>
</div>

Otherwise it will be a conflict between your style and disabled attribute

answered Apr 19, 2017 at 12:14

sainu

2,7013 gold badges26 silver badges43 bronze badges

Collectives™ on Stack Overflow

Add default value to input field Angular2

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related