检查电子邮件是否存在:{Angular 1.5，TS，PUG}

Question

我的任务是检查电子邮件是否存在。我有几个输入字段的表单。其中之一是电子邮件字段。用户进入并离开该字段后，我需要发送请求以检查电子邮件是否存在。如果响应返回 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 上收听模糊事件(在我的例子中是输入字段(
• 在模糊中，调用网络服务以检查电子邮件是否可用
• 将"电子邮件可用"设置为 true 或 false(用于样式设置目的(

也许它可以激励你。