How to reset validation messages using AngularJS?

Question

Below form is for modal window I have two fields if i select the values and without saving or even after save if i open modal window again i see all the required field messages, How can i reset the validation messages every time i open the modal window ?

main.html

    <form name="addChallengeForm" id="addChallengeForm" novalidate  ng-controller="challengesCtrl" class="border-box-sizing">
            <div class="modalForm">
                <div class="row">
                    <div class="form-group col-md-12 fieldHeight">
                        <label for="originatingGroup" class="required col-md-4">Originating group:</label>
                            <div class="col-md-8">
                                <select 
                                    kendo-drop-down-list
                                    data-text-field="'text'"
                                    data-value-field="'id'" name="originatingGroup"
                                    k-option-label="'Select'" ng-model-options="{updateOn: 'blur'}"
                                    ng-model="challengesDTO.originatingGrpLkupCode"
                                    k-data-source="challengeGroupOptions"
                                    id="originatingGroup" required>         
                                </select>   
                                <p class="text-danger" ng-show="addChallengeForm.originatingGroup.$touched && addChallengeForm.originatingGroup.$error.required">Originating group is required</p>
                            </div>
                    </div>
                </div>
<div class="row">
            <div class="form-group col-md-12">
                <label for="challangeDes" class="required col-md-4">Description of challenge:</label>
                <div class="col-md-8">
                    <textarea rows="4" class="form-control"
                        name="challangeDes" id="challangeDes"
                        ng-model="challengesDTO.challengeDescription" required
                        placeholder="Description of challenge"  ng-model-options="{updateOn: 'blur'}">
                    </textarea>
                    <p class="text-danger" ng-show="addChallengeForm.challangeDes.$touched && addChallengeForm.challangeDes.$error.required">Description of challenge is required</p>
                </div>
            </div>
        </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary pull-right" ng-disabled="addChallengeForm.$invalid" ng-click="submit()">Save</button>
            </div>
    </form>

mainCtrl.js

$scope.addChallenge = function (opCheckList,checklistSessionKey) {
        challengesGridConfig.challengemodalWinConfig.title = 'Add challenge';
        $scope.viewChallengeWin.setOptions(challengesGridConfig.challengemodalWinConfig);
        $scope.$broadcast('addChallenge', $scope.riskAssessmentDTO.riskAssessmentKey,opCheckList,checklistSessionKey);
    };

childCtrl.js

 $scope.$on('addChallenge', function (s,id,opCheckList,checklistSessionKey){
 $scope.viewChallengeWin.open().center();
      $scope.editMode = false;
      $scope.clearFields = clearForm();
 });


var clearForm = function(){
         $scope.challengesDTO = {
                 themesKyList: null
         };
         $scope.challengeGroupOptions = kendoCustomDataSource.getDropDownDataSource('RA_ASES_CHLNG_GRP');
         $scope.challengThemesDataSource = kendoCustomDataSource.getDropDownDataSource('RA_CHLNG_THEME');
         $scope.challengOutComeOptions = kendoCustomDataSource.getDropDownDataSource('RA_CHLNG_OUTCOME');
};

Can you share the code used to open and close the modal and the challengesCtrl controller? And what version of Angular are you using? — nichols
– nichols, Commented Jul 9, 2015 at 16:54

Keammoort · Accepted Answer · 2015-07-09 17:12:15Z

1

I think, when you are opening the modal you should reset conditions you're using in ng-show (for errors) to default. You're checking if input was touched, why don't you set it untouched when opening modal?

$scope.addChallengeForm.originatingGroup.$setUntouched();
$scope.addChallengeForm.challangeDes.$setUntouched();

answered Jul 9, 2015 at 17:12

Keammoort

3,06517 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to reset validation messages using AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related