将默认值添加到输入字段 Angular2答案

【问题标题】：Add default value to input field Angular2将默认值添加到输入字段 Angular2
【发布时间】：2017-04-19 12:05:49
【问题描述】：

我正在尝试构建一个 angular 2 应用程序，我的问题是我想为输入提供一个默认值并使其禁用，我尝试了这个，但它不起作用。

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

有什么办法吗？

【问题讨论】：

尝试占位符 = {{uuid}}
如果您不想在模型中存储默认值，请检查this aswer
你应该在模型上设置这个。您是否碰巧阅读了文档...？ - angular.io/guide/forms-overview

标签： angular input

【解决方案1】：

如果你想在没有双向绑定的情况下给出默认值，请使用[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>

【讨论】：

【解决方案2】：

您的模板：

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

在你的组件中：

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

【讨论】：

【解决方案3】：

尝试从输入中删除值

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

否则你的style和disabled属性会冲突

【讨论】：