Question

我在Angular 2中建立一个注册表单，要求用户在提交之前提供其网站的网址。

提交表单时，我需要提供的网址为＆＃34; http://www.google.com＆＃34;。为了引导用户使用该格式，我希望表单字段自动填充最初的＆＃34; http：//＆＃34;一旦用户点击该字段（或当用户开始输入时 - 任何一种情况都是可以接受的）。目前我在该字段中有占位符文字，其中显示＆＃34;请提供您网站的网址＆＃34;，但我在制作＆＃34; http：//＆＃34;当用户实际点击该字段或开始输入时，会出现前缀。

任何想法都将不胜感激。 Here is what the form field looks like when the user clicks on it.它的内容应切换为＆＃34; http：//＆＃34;点击或输入时。这是代码目前的样子：

<div class="form-group">

  <input
    class="form-control"
    type="text"
    name="companyUrl"
    [(ngModel)]="user.companyUrl"
    placeholder="Company url"
    required pattern='https?://.+'
    #companyUrl
   >

    <div *ngIf="companyUrl.errors && (companyUrl.dirty || companyUrl.touched)" class="text-danger">
      <div [hidden]="!companyUrl.errors.required">
        Company URL is required.
      </div>
      <div [hidden]="!companyUrl.errors.pattern">
        URL should begin with http:// or https://
      </div>
    </div>

<div>

Answer 1

添加一个函数，在输入的click事件上添加前缀。如下所示：

<input #companyUrl  (click)="addHttpPrefix()" >

并且在这个功能中 1.获取companyUrl的价值。 2.检查它是否以http开头，然后跳过其他前缀为http：//

if(companyUrl.indexOf('http') > -1) {
    companyUrl = 'http://' + companyUrl;
}

这种方式当用户最初点击输入http：//时会附加。如果（点击）事件不符合您的要求，您可以尝试使用（更改）或其他事件。

在Angular 2

1 个答案: