How to reset validation messages using AngularJS? - html

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');
};

Answer 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();