Question

我的页面中包含以下html内容。在提交后单击此处，我将执行一些服务器端验证以检查重复的名称。如果重复，则显示一条消息。现在，当用户编辑输入时，即使在单击保存按钮之前，我也希望隐藏错误消息。我该怎么办？

<form name="vm.createStepForm" ng-submit="vm.saveStepDefinition(vm.createStepForm.$valid)" novalidate>
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <span for="step_definition_name" class="col-md-4 step-builder-label">{{'customWorkflow:stepBuilder.stepName' | i18next }}</span>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" id="step_definition_name" name="step_definition_name" required ng-disabled="vm.stepDefinition.canDelete == false" ng-model="vm.stepDefinition.name" />
                                        <div ng-show="vm.createStepForm.$submitted">
                                            <div class="validation-error-text" ng-show="createStepForm.step_definition_name.$error.required">
                                                {{'customWorkflow:stepBuilder.stepNameRequiredError' | i18next}}
                                            </div>
                                            <div class="validation-error-text" ng-show="vm.duplicateStepName && !createStepForm.step_definition_name.$dirty">
                                                {{'customWorkflow:stepBuilder.duplicateStepName' | i18next}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr />
                                <hr />
                                <div class="form-group">
                                    <div class="col-md-4"></div>
                                    <div class="col-md-7">
                                        <button class="btn btn-default pull-right" type="button" ng-click="vm.cancel()" id="btn_create_step_cancel">{{ 'customWorkflow:stepBuilder.cancel' | i18next }}</button>
                                        <input class="btn btn-primary pull-right" style="margin-right:5px;" type="submit" id="btn_save_step" ng-disabled="(vm.createStepForm.$invalid || stepResultsForm.$invalid)" value="{{ 'customWorkflow:stepBuilder.save' | i18next }}">
                                    </div>
                                </div>
                            </div>
                        </form>

现在，当我更改名称并跳出时，我希望不显示错误消息

Answer 1

您可以在输入中使用ng-change事件，并将duplicateStepName设置为false

<input type="text" class="form-control" id="step_definition_name" name="step_definition_name" ng-change="change()" required ng-disabled="vm.stepDefinition.canDelete == false" ng-model="vm.stepDefinition.name" />

然后在控制器中

$scope.change=function(){
  $scope.duplicateStepName=false
}

demo

在编辑输入时将隐藏角度验证消息

1 个答案: