Question

我有一个表单，用户会看到一个＆＃34; Save Changes＆＃34;按钮首先，如果用户单击此按钮并且没有验证问题，将向用户显示＆＃34;确认更改＆＃34;按钮。

我的代码实现了这个目标：

<div class="col-xs-12">
                        <span ng-hide="confirm">
                            <button type="button" class="vfnz-submit" ng-click="confirm = ! confirm;">Save changes</button>
                            <a ng-href="#/huntgroups/" class="vfnz-reset">Cancel</a>
                        </span>
                        <div class="hide" ng-class="{ 'hide': ! confirm }">
                            <button type="submit" class="vfnz-submit confirm-changes">Confirm changes</button>
                            <a class="vfnz-reset" ng-click="confirm = ! confirm;">Cancel</a>
                        </div>
                    </div>

这很好用但是，如果表单中有任何错误，我希望错误显示在＆＃34;保存更改＆＃34;。我必须确保提交验证显示的逻辑是这样的：

$scope.submitForm = function(form, isValid){
                if (!isValid){
                  $scope.submitted = true;
                } else {
                  $scope.submitted = false;
                }
    }

我不确定要改变什么或如何实现我之后的改变。

重申：

在保存更改时，显示错误消息（如果有）。如果有错误消息，请勿显示确认更改。如果没有错误消息，请显示确认更改，然后提交。

Answer 1

你想要这样的东西......调整它...... 我有一个更好的例子，但它在我的工作笔记本电脑上...可以明天给你:) jsfiddle

    <form name="form" no-validate ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
        <label class="control-label" for="email">Your email address</label>
        <div class="controls">
            <input type="email" name="email" ng-model="email" required />
            <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
            <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

提交表格|确认保存更改验证

1 个答案: