角度2のフォームフィールドレスポンスを先頭に追加

Question

投稿する前に、ウェブサイトのURLを入力するようにユーザーに求めるアンギュラ2の登録フォームを作成しています。

フォームが送信されると、指定された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> 

Answer 1

は、入力のクリックイベントにプレフィックスを追加する機能を追加します。以下のような 何か：

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

そして、この機能で 1 companyUrlの値を取得します。それはhttpで始まるならば、HTTPで他にプリペンドをスキップ 2.チェック：//

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

ユーザーが最初に入力されたHTTPをクリックこの方法：//が追加されるだろう。 （クリック）イベントが要件を満たしていない場合は、（変更）または他のイベントを試すことができます。