在 Angular 2 中添加表单字段响应

Posted 2023-04-13

【中文标题】在 Angular 2 中添加表单字段响应

【英文标题】：Prepend a form field response in Angular 2

【发布时间】：2017-07-13 10:42:17

【问题描述】：

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

提交表单时，我需要提供的 URL 的样式为“http://www.google.com”。为了引导用户使用该格式，我希望表单字段在用户单击该字段时（或当用户开始输入时——任何一种情况都可以接受）自动填充初始的“http://”。目前，我在“请提供您网站的 URL”的字段中有占位符文本，但是当用户实际单击该字段或开始输入时，我无法使“http://”前缀出现。

任何想法将不胜感激。 Here is what the form field looks like when the user clicks on it. 点击或输入时，其内容应切换为“http://”。下面是当前代码的样子：

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

【参考方案1】：

添加一个函数来为输入的点击事件添加前缀。 如下所示：

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

在这个函数中 1.获取companyUrl的值。 2. 检查它是否以 http 开头然后跳过 else 前缀 http://

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

这样，当用户最初点击输入 http:// 时，将被附加。 如果 (click) 事件不符合您的要求，您可以尝试使用 (change) 或其他事件。