带有捕获值的角度表单验证答案

【问题标题】：Angular form validation with catch value带有捕获值的角度表单验证
【发布时间】：2016-01-25 07:33:17
【问题描述】：

我有一个表单和一个submit 按钮。 disabled 直到所有表单 inputs 都有效。

实际上，当chrome在加载页面时捕获输入值时，就会出现问题。所以，事实上，这些字段不是空的，这意味着表单是有效的，提交按钮应该是enabled。但直到您在页面正文的任何位置至少单击一次。

我认为，在填写表单时看到提交按钮被禁用会对用户产生不好的影响，因此我也在寻找一种通过捕获值来有效表单的方法。

我使用 Plunker 来展示我的代码。虽然，我不能告诉你实际的问题。我的意思是捕获字段中的值，但我们将不胜感激。

plunker`

    <form
        ng-class="{true: 'animated'}[LoginAnimate]"
        class="form login stylenormal col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4"
        name="x_form"
        action="j_security_check"
        method="post"
        novalidate
    >
        <h3>Login</h3>
        <fieldset>
            <div class="form-group" ng-class="{ 'has-error' : x_form.j_username.$invalid}">
                <label>username:</label>
                <input
                    class="form-control"
                    maxlength="50"
                    name="j_username"
                    size="20"
                    type="text"
                    autofocus
                    ng-focus="userfocused = true"
                    ng-blur="userfocused = false"
                    ng-model="user.j_username"
                    required
                >
                <div data-icon="icon" ng-class="{true: 'input-toggle active', false: 'input-toggle'}[userfocused]" class="">
                    <i class="fa fa-user"></i>
                </div>

            </div>
            <div class="form-group" ng-class="{ 'has-error' : x_form.j_password.$invalid}">
                <label>password:</label>
                <input
                    class="form-control"
                    maxlength="50"
                    name="j_password"
                    size="20"
                    type="password"
                    ng-focus="passfocused = true"
                    ng-blur="passfocused = false"
                    ng-model="user.j_password"
                    required
                >
                <div data-icon="icon" ng-class="{true: 'input-toggle active', false: 'input-toggle'}[passfocused]" class="">
                    <i class="fa fa-key"></i>
                </div>

            </div>
            <div class="form-group submit-bar" ng-class="{true: 'loaded'}[SubmitLoad]">
                <input
                    class="btn"
                    type="submit"
                    ng-disabled="x_form.$invalid"
                    value="submit"
                >
            </div>
        </fieldset>
    </form>

</div>

我`

【问题讨论】：

你试过了吗..ng-init？就像在你的情况下form 包括ng-init="user = user || {} "

标签： angularjs forms

【解决方案1】：

我已经检查了您的 Plunker 代码。并用默认值填写表格。然后检查表单是否有效。即使不点击页面也有效。

这是您的 plunker 的修改版本

...
$scope.user = {
    j_password: '123',
    j_username: '12323'
}
...

如果我误解了您的问题，请纠正我。

【讨论】：

感谢您的帮助，但实际上我的问题是关于在 chrome 中使用“记住用户名和密码”提供的用户，所以当他们启动页面时，他们希望在表单中看到他们的登录信息和无需再次输入。在这种情况下，我的表单无法验证已被捕获数据填充的字段。

【解决方案2】：

看来这是浏览器chrome的错误。不使用 angulargs 也会发生同样的事情。直到点击页面，即使document.querySelector ('#LoginForm_password').value 有一个空白value。你必须写支持浏览器chrome。

【讨论】：