Question

我有3个字段，如密码，新密码和确认新密码，以及提交按钮。

现在我想执行2个功能：

当写入现有密码时，应激活SUBMIT按钮。
当写入新密码时，提交按钮将被取消激活，并且仅在输入确认新密码时才会激活

这是我的代码：

<div ng-show="normalSignIn">
    <div class="row" ng-class="{ 'has-error' : accountDetailsForm.exispassword.$invalid && !accountDetailsForm.exispassword.$pristine }">
        <div class="col">
            <div class="input-label">Existing Password*</div>
            <input type="password" class="edit-password" placeholder="Please enter" ng-model="signinInfo.password" name="exispassword" ng-minlength="8" ng-readonly="isReadOnly"
                ng-required="normalSignIn" >
            <p ng-show="accountDetailsForm.exispassword.$error.minlength && !accountDetailsForm.exispassword.$pristine" class="help-block">Password must be 8 character
                long.</p>
            <p ng-show="accountDetailsForm.exispassword.$error.required && !accountDetailsForm.exispassword.$pristine" class="help-block">Please enter a password.</p>
        </div>
    </div>
    <div class="row" ng-class="{ 'has-error' : accountDetailsForm.password.$invalid && !accountDetailsForm.password.$pristine }">
        <div class="col">
            <div class="input-label">New Password</div>
            <input type="password" class="edit-password" placeholder="Please enter" ng-model="accountDetails.password" name="password" ng-minlength="8" ng-readonly="isReadOnly" ng-dirty="true">
            <p ng-show="accountDetailsForm.password.$error.minlength && !accountDetailsForm.password.$pristine" class="help-block">Password must be 8 character long.</p>

        </div>
    </div>
    <div class="row" ng-class="{ 'has-error' : accountDetailsForm.confirmPassword.$invalid && !accountDetailsForm.confirmPassword.$pristine }">
        <div class="col">
            <div class="input-label">Confirm New Password</div>
            <input type="password" class="edit-password" placeholder="Please enter" ng-model="confirmPassword" name="confirmPassword" match="accountDetails.password"
                ng-readonly="isReadOnly">
            <p ng-show="accountDetailsForm.confirmPassword.$error.match && !accountDetailsForm.confirmPassword.$pristine" class="help-block">Confirm and New password should
                be same.</p>
        </div>
    </div>
</div>

<div class="col">
        <button class="button button-block button-rentr-primary" ng-hide="hideTapToEdit" ng-click="landlordDetailCtrl.updateAccountDetails(signinInfo,accountDetails)"
            ng-disabled="accountDetailsForm.$invalid">SAVE</button>
    </div>

任何人都有想法请告诉我。？

Answer 1

如果我理解正确，您希望仅当用户将表单更改为无效状态时才会禁用提交按钮 - 而且从一开始就不是这样。

这可以使用$sum=0; foreach($_POST['check_box'] as $shipping) { $shipping = $shipping; $sum += $shipping; } echo json_encode($sum);标志来完成，该标志指定用户是否已更改控件。您可以尝试将提交按钮的ng-disabled更改为以下内容：

$dirty

PS：还有accountDetailsForm.exispassword.$dirty && accountDetailsForm.password.$dirty && accountDetailsForm.$invalid，与$touched非常相似。有关精细差异，请参阅docs。

Answer 2

你可以试试这个 -

 ng-disabled="!(signinInfo.password || (accountDetails.password && confirmPassword))"

所以你的按钮代码是 -

    <button class="button button-block button-rentr-primary"
            ng-hide="hideTapToEdit"
            ng-click="landlordDetailCtrl.updateAccountDetails(signinInfo,accountDetails)"
            ng-disabled="!(signinInfo.password || (accountDetails.password && confirmPassword))">
           SAVE
    </button>

使用angularjs验证表单

2 个答案: