【问题标题】:How to tell angularjs form that the input value has changed如何告诉angularjs表单输入值已更改
【发布时间】:2017-09-15 01:45:40
【问题描述】:

我使用 angularjs 建立了一个注册。提交过程正常。然后我想验证电子邮件是否已经注册。如果存在,则显示通知电子邮件存在的错误消息。我面临的问题是当用户更改电子邮件地址时,提交的电子邮件仍然是前一个。如何告诉 Angular 输入值已更改并提交新插入的值。

我的注册表单

<div ng-controller="signupController">
<form ng-submit="doSignup()">
            <h2 class="form-signin-heading">Sign Up</h2>
            <div class="login-wrap">
                <input type="text" name="email" class="form-control" autofocus="" ng-model="formData.email">
                <span class="text-danger">{{ emailExistError }}</span>
                <input type="password" name="password" class="form-control" placeholder="Password" ng-model="formData.password">
                <input type="password" name="password_conf" class="form-control" placeholder="">
                <button class="btn btn-lg btn-login btn-block" type="submit">Sign Up</button>

            </div>
        </form>
</div>

app.js

angular.module('myApp', ['ngRoute', 'ngSanitize'])
    .controller('mainController', function ($scope, $http) {

    })
    .controller('signupController', function ($scope, $http,$window) {

        $scope.formData = {};

        $scope.doSignup = function () {
            $http({
                method: 'post',
                url: 'signup.php',
                data: $.param($scope.formData),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            })
            .success(function (data) {

                $scope.login = data;

                if (data.status == 'ok') {
                    $('#successModal').modal('show');
                }
                else if (data.status == 'email exist'){
                    $scope.emailExistError = 'Email exist. Use different email';
                }
                else {
                    $('#failedModal').modal('show');
                }

            })
        }
    })

【问题讨论】:

  • hmm.. 我觉得这很奇怪.. 用then 代替success 怎么样?
  • 奇数。我试图在没有 http 请求的情况下复制您的应用程序。好像还可以,看this
  • 好的,我通过显示{{formData}} 进行检查,显然电子邮件地址确实发生了变化。那么为什么我仍然有那个电子邮件存在错误?我错过了什么?
  • 您似乎误解了事物的流程。您首先将数据发送到服务器,然后如果服务器使用'email exist' 拒绝它,则您正在设置不同的属性 $scope.emailExistError。当用户稍后更改$scope.formData.email 的值时,它对$scope.emailExistError 没有影响。

标签: javascript angularjs forms


【解决方案1】:

试试

$watch('email',function(newVal,oldVal){
if(newVal!=oldVal){
$scope.doSignup();
}});

【讨论】:

    猜你喜欢
    • 2011-06-01
    • 1970-01-01
    • 2013-06-07
    • 2014-11-13
    • 1970-01-01
    • 1970-01-01
    • 2014-06-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多