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

Question

我正在观看这个视频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>

Answer 1

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

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

或者更好的NgInit：

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

Answer 2

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

像这样的东西

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

会产生同样的效果。