電子メールが存在することを確認：{Angular 1.5、TS、PUG}

Question

私の仕事は、電子メールが存在するかどうかを確認することです。私はいくつかの入力フィールドを持つフォームを持っています。それらの1つは電子メールフィールドです。ユーザーがフィールドに入ってフィールドを離れると、電子メールが存在しないかどうかを確認する要求を送信する必要があります。応答がtrueを返す場合は、送信ボタンを有効にする必要があります。それ以外の場合はエラーメッセージを表示します。

私は、EmailComponent.ts,Email.pugをテンプレートとして使用しており、角は1.5 です。角度が非常に新しく、これであなたの助けが必要です。 1）このタスクを完了させるのにベストプラクティスは何ですか？ 2）EmailComponent.tsのcheckEmailの方法を整理して、ユーザーがフィールドを離れるとどのようにリクエストを送信できますか？ 3）電子メール入力のイベントをどのようにぼやけさせることができますか？

Answer 1

入力用の属性としてディレクティブを作成し、電子メールが利用可能であることを示すブラーイベントの後にディレクティブチェックでディレクティブを作成できます。

私はここにTSについて多くを知らないが、私はJSでやったものです：

app.directive('checkEmail', function ($timeout, $http) { 
    return { 
     restrict:'A', 
     require: 'ngModel', 
     scope: { 
      email: "=email" 
     }, 
     link: function (scope, elem, attrs, ctrl) { 
      elem.on('blur', function (evt) { 
       scope.$apply(function() { 
        var payload = {email: scope.email}; 
        if (scope.email) { 
         $http.post('/app/v1/users/checkEmail', payload).success(function (data, status, headers, config) { 
          ctrl.$setValidity('emailIsAvailable', true); 
         }).error(function (data, status, headers, config) { 
          ctrl.$setValidity('emailIsAvailable', false); 
         }); 
        } 
       }); 
      }); 
     } 
    }; 
}); 

これは何：

• は、添付のelemにイベントを（曖昧に聞きます私の場合、入力フィールド）でぼかしの
• は、電子メールが利用可能であるかどうかを確認するためにWebサービスを呼び出して
• セット「emailIsAvailable」に（それはスタイリング目的であった）
真または偽

多分あなたに影響を与えることができます。