Question

我有一个表单和一个submit按钮。在所有表单disabled生效之前，inputs为{。}。

实际上，当Chrome在加载页面时捕获输入值时会出现问题。因此，事实上，字段不为空，这意味着表单有效，提交按钮应为enabled。但直到你在页面正文的任何地方点击至少一次。

我认为，对于用户来说，在填写表单时禁用提交按钮会产生不良影响，所以我也在寻找一种通过catch值来验证表单的方法。

我使用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>

I`

Answer 1

我检查了您的 Plunker 代码。并使用默认值填充表单。然后检查表单是否有效。即使您没有点击页面，它也是有效的。

以下是plunker

的修改版本

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

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

Answer 2

这似乎是浏览器chrome的一个错误。不使用angulargs同样的事情发生。在点击该页面之前，即使Ellipse也有空白document.querySelector ('#LoginForm_password').value。你必须写支持浏览器chrome。

具有捕获值

2 个答案: