Question

我有一个像这样的表格

<div ng-controller="controllerPasswordChange">
<form name="form" novalidate>
        <div >
            <label class="control-label screen-reader-text" for="email">Email</label>
            <div>
                <input ng-model="formModel.email" type="email" name="email" class="large-field" id="email" placeholder="Email" required>
                <div class="input-help">
                    <h4>Invalid Email</h4>
                </div>
            </div>
        </div>

        <div>
            <label class="control-label screen-reader-text" for="password">Password</label>
            <div class="controls relative mrl">
                <input name="password" id="password" ng-model="formModel.password" ng-change="checkPasswordCriteria()" required class="immediate-help large-field" type="password" placeholder="Enter new password">
            </div>
        </div>
</form>

当密码输入改变时，checkPasswordCriteria方法被调用如下

var checkingPasswordCriteria =  false;
var checkPasswordCriteriaSuccess = function()
{
    console.log("checking password criteria success");
    checkingPasswordCriteria = false;
    // HERE I WANT TO CHANGE THE VALIDITY OF THE PASSWORD FIELD TO TRUE
};

var checkPasswordCriteriaError = function()
{
    console.log("checking password criteria error");
    checkingPasswordCriteria = false;
    // HERE I WANT TO CHANGE THE VALIDITY OF THE PASSWORD FIELD TO FALSE
};

$scope.checkPasswordCriteria = function()
{
    if( !checkingPasswordCriteria )
    {
        checkingPasswordCriteria = true;
        ajaxService.checkPasswordCriteria($scope.formModel.email,$scope.formModel.password,
            checkPasswordCriteriaSuccess, checkPasswordCriteriaError);
    }
};

我想从我的控制器更改密码输入字段的有效性，具体取决于收到的http结果代码。我已经看到了使用指令改变有效性的方法，但在我的情况下，它感觉有点矫枉过正+只是为了知道如何做到这一点会很高兴...

干杯，泽维尔

[编辑]
我必须添加我希望有效性在输入字段中作为用户输入而不是在焦点发生变化时更改 [/编辑]

Answer 1

将表单的密码控制传递给checkPasswordCriteria并在该函数内部修改它可以解决问题：

<div>
    <label class="control-label screen-reader-text" for="password">Password</label>
    <div class="controls relative mrl">
        <input name="password" id="password" ng-model="formModel.password" ng-change="checkPasswordCriteria(form.password)" required class="immediate-help large-field" type="password" placeholder="Enter new password">
    </div>
</div>

在checkPasswordCriteria中，只需根据响应设置控件的有效性：

$scope.checkPasswordCriteria = function (passwordControl) {
    if (!checkingPasswordCriteria) {
        checkingPasswordCriteria = true;

        // Simulating a service call and response
        $timeout(function() {
            passwordControl.$setValidity('valid', Math.random() >= 0.5);
            checkingPasswordCriteria = false;                
        }, 1000);
    }
};

演示小提琴：

http://jsfiddle.net/UHBAu/

AngularJS - 改变控制器的输入有效性

1 个答案: