Angularjs表单验证,基于服务响应显示错误消息

时间:2016-09-22 11:07:13

标签: javascript angularjs

我有一个表单,我正在检查电子邮件是否已经存在。如果它已经存在,我将从json响应中显示错误消息。这部分已经完成(这是我在用户点击提交按钮时检查)。

如果电子邮件已经存在,我收到409错误。

我需要更新电子邮件输入文件。需要添加一个msg该电子邮件已经存在。我正在使用ng-show =“personalInfo。$ submitted”

<form name="personalInfo" role="form" autocomplete="off">
<div class="form-group">
    <input type="text" maxlength="11" class="form-control" name="usupiEmail" ng-model="usuAttributes.personalInfo.email" ng-focus="ShowPlaceholder('email')" />
    <label>Email ID</label>

    <div class="error-message" ng-show="personalInfo.$submitted" ng-cloak>
        Please verify your Email.
    </div>
</div>
<button type="submit" class="btn-default" ng-click="usupiUpdateUser()">Next</button>

我也试过不同的方法:

function checkWrongEmail (errorCode) {
    if (errorCode === '409') {
        return true;
    }
    return false;
}

1 个答案:

答案 0 :(得分:0)

首先将ng-app指令添加到封闭的div中。没有它将无法工作。我试图手动输入true / false,但是直到ng-app设置才起作用。 见JSFiddle。如果从表单元素中删除ng-app,它将无法工作。而使用指令将ng-show更改为true / false将得到所需的结果。

您指定的ng模型是:

usuAttributes.personalInfo.email

但是ng-show中的表达是:

personalInfo.$submitted

您应该检查这是否在模型范围内 还要检查你在输入元素上定义模型的事实是否立即关闭不会导致访问变量的问题(所以再次,是否有错误消息div访问它?)