如何在 Angular 2 的表单中添加预设文本？答案

【问题标题】：How do I add pre-set text in form for Angular 2?如何在 Angular 2 的表单中添加预设文本？
【发布时间】：2017-12-20 15:05:01
【问题描述】：

我正在观看这个视频here 在 Angular 2 中创建一个带有验证的表单，但我真的很想知道这个人是如何在输入字段中包含 URL 的开头的。我遵循了他的相同代码，默认情况下无法显示“http://”部分。

这就是我所拥有的

<label>Company URL <span class="required">*</span></label>
<input class="form-control" [(ngModel)]="company.company_url" name="url" #url="ngModel" type="url" pattern="https?://.+" id="url" required maxlength="255">
<div *ngIf="companyErrors?.url" class="alert alert-field alert-danger">
    {{companyErrors.url}}
</div>

【问题讨论】：

标签： javascript angular forms

【解决方案1】：

看起来company.company_url 值在组件第一次渲染之前已经初始化。您可以尝试对组件的构造函数进行赋值：

constructor(/*...*/) {
  // ...
  company.company_url = "http://";
}

或者NgInit 可能更好：

ngOnInit() {
  // ...
  company.company_url = "http://";
}

【讨论】：

【解决方案2】：

另一种方法是在input 标签上使用placeholder 属性。

像这样的

<input class="form-control" [(ngModel)]="company.company_url" name="url" #url="ngModel" type="url" pattern="https?://.+" id="url" required maxlength="255" placeholder="http://">

会呈现相同的效果。

【讨论】：