0

我最近在 Angular 中遇到了 ng 消息的问题。我尝试将它用作验证器，但注意到某些东西不能按我想要的方式工作。当用户同时提供密码和用户名时，我希望 ctrl.login() 函数运行。不幸的是，现在只提供其中一个就足够了，该功能将触发。我怎样才能解决这个问题？

<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()"> 
        <div class="list list-inset">
            <div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
                <input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
            </div>

            <div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>

            <div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
                <input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
            </div>

            <div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
            </div> 

        </div>          
        <div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
        <button class="button button-full button-calm button-login" data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid" type="submit">Sign In</button>
    </form>

    <script id="error-list.html" type="text/ng-template">  
        <div class="error" ng-message="required">
            This field is required
        </div>              
    </script>

编辑：为了澄清。感谢您指出按钮禁用功能，但这不是我问题的重点。问题是 ctrl.login 函数将被触发（换句话说，表单将被提交），尽管只有 2 个所需输入中的 1 个已被填写。如果用户名或密码为空，我希望 ngMessage 将无法提交表单。提交按钮上的禁用功能只是我想在将来删除的快速修复程序。

<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()"> 
        <div class="list list-inset">
            <div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
                <input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
            </div>

            <div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>

            <div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
                <input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
            </div>

            <div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
            </div> 

        </div>          
        <div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
        <button class="button button-full button-calm button-login" type="submit">Sign In</button>
    </form>

    <script id="error-list.html" type="text/ng-template">  
        <div class="error" ng-message="required">
            This field is required
        </div>              
    </script>

EDIT2：如果有人想知道的话。我解决了这个问题。感谢您的帮助和贡献:)

4

2 回答 2

0

您只需要将 && 替换为 || 在 ：

data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid"
于 2015-08-08T18:39:26.213 回答
0

您应该将 data-ng-disabled 条件更改为 'authorizationForm.password.$invalid || authenticationForm.username.$invalid'。现在只要两者之一有效（但不一定两者都有效），用户可以点击提交。

于 2015-08-08T18:39:35.160 回答