如何使用 AngularJS 重置验证消息？答案

【问题标题】：How to reset validation messages using AngularJS?如何使用 AngularJS 重置验证消息？
【发布时间】：2015-07-10 01:12:15
【问题描述】：

下面的表单用于模式窗口如果我选择值并且没有保存甚至在保存之后如果我再次打开模式窗口我会看到所有必需的字段消息，我有两个字段，我如何在每次打开时重置验证消息模态窗口？

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

【问题讨论】：

你能分享用于打开和关闭模态和challengeCtrl控制器的代码吗？您使用的是哪个版本的 Angular？
编辑了我的问题角度版本 1.3.9

标签： html angularjs validation

【解决方案1】：

我认为，当您打开模式时，您应该将您在 ng-show（用于错误）中使用的条件重置为默认值。您正在检查输入是否被触摸，为什么在打开模式时不设置它？

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

【讨论】：