Question

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

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

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

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

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

1 个答案: