Angular validation message to be hidden on editing input

Question

I have the following html content in my page. Here upon submit click I perform some server side validation to check for duplicate names. If its a duplicate then I show a message. Now when user edits the input I want the error message to be hidden even before clicking on save button. How do I do it?

<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>

Now when I change the name and tab out I want the error message not to be shown

Answer 1

you can use ng-change event on your input and set duplicateStepName as 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" />

then in controller

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

demo