Question

我最近在有角度的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>

编辑：澄清。 Thx用于指出按钮禁用功能，但这不是我的问题。问题是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：如果案件有人在想。我解决了这个问题。感谢帮助和贡献：）

Answer 1

你只需要更换＆amp;＆amp;到||在：

data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid"

Answer 2

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

ng消息中的多个必需输入[Angular]

2 个答案: