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