那时可见字段的表单验证?

时间:2014-08-14 13:09:42

标签: javascript angularjs validation

我的表格如下:

<label class="col-md-2 control-label">
    <input type="checkbox" id="HomeType" name="HomeType" ng-model="ModelData.HomeType"
        ng-checked="ModelData.HomeType == 'T'" />
    Show Home Type 1
</label>

<!--This is visible only if above checkbox is selected-->                       
<div class="form-group" ng-if="ModelData.HomeType1">
    <label for="HomeType1" class="col-md-3 control-label">
        Type of Home:
    </label>
    <div class="col-md-4" ng-class="{ 'has-error' : MyForm.HomeType1.$invalid && submitted}">
        <select id="HomeType1" name="HomeType1" class="form-control"
            ng-model="ModelData.HomeType1" ng-options="Home.HomeType as Home.HomeDescription for Home in HomeTypeTable"
            required>
        </select>
        <span ng-show="MyForm.HomeType1.$invalid && submitted" class="help-block">
            Please select the Type of Home 1.</span>
    </div>
</div>

<!--This is always visible on the screen-->                     
<div class="form-group">
    <label for="HomeType2" class="col-md-3 control-label">
        Type of Home 2:
    </label>
    <div class="col-md-4" ng-class="{ 'has-error' : MyForm.HomeType2.$invalid && submitted}">
        <select id="HomeType2" name="HomeType2" class="form-control"
            ng-model="ModelData.HomeType2" ng-options="Home.HomeType as Home.HomeDescription for Home in HomeTypeTable"
            required>
        </select>
        <span ng-show="MyForm.HomeType2.$invalid && submitted" class="help-block">
            Please select the Type of Home 2.</span>
    </div>
</div>

因此,Home Type 2下拉列表始终可见,Home Type 1仅在选中复选框时可见。

现在,点击表单提交按钮,我将$ scope.submitted变量设置为true并按如下方式停止提交:

$scope.submitted = true;
if($scope.MyForm.$invalid == true){
return false;
}        

因此,这会将红色的粗体显示在我的Home Type 2下拉列表中。直到这一切都很好。如果我选择Home Type 2下拉列表中的任何值,红色就会消失,我也可以提交表单(因为Home Type 1仍然隐藏,因此未经过验证)。

但是当我这样做时问题出现了:

  1. 假设我的Home Type 2为空白且未选中Home Type 1复选框(因此隐藏了Home Type 1),我尝试提交表单。
  2. 此触发器提交并使Home Type 2变为红色。并停止提交。
  3. 然后我选择了Home Type 1复选框,这样就可以在屏幕上显示Home Type 1。但是这款Home Type 1也是红色!!
  4. 我想仅在提交表单时验证此Home Type 1下拉列表,并且该字段在该提交时可见。如果在提交时隐藏了Home Type 1,如果用户在首次提交尝试后选择了复选框,则它应该是可见的。
  5. 希望我能够解释我的情况。

1 个答案:

答案 0 :(得分:0)

经过多次尝试,我自己实现了这个:

//1. Create a New Directive
angular.module('ipRequired', []).directive("ipRequired", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            console.log('init');
            console.log(scope.InvalidFields);

            scope.InvalidFields[attrs.name] = false;

            console.log('after');
            console.log(scope.InvalidFields);

            scope.$on('$destroy', function () {
                delete scope.InvalidFields[attrs.name];       //this will remove the property from InvalidFields object on removal of field from screen

                console.log('destroy');
                console.log(scope.InvalidFields);
            });
        }
    };
});


//2. add this in your Controller's submit module
$scope.InvalidFields = {};  //add also at the beginning of every controller

$scope.InvalidFields = {};  //reset
angular.forEach($scope.InsuredPortalForm.$error.required, function (field) {
    this[field.$name] = true;   //adding current 'invalid' field into $scope.InvalidFields object (passed as 'this' in forEach context)
}, $scope.InvalidFields);



//3. add this in every required field
//as InvalidFields.FieldName like InvalidFields.ExpirationCancellationDate
<div class="form-group datefielddiv" ng-class="{ 'has-error' : InsuredPortalForm.ExpirationCancellationDate.$invalid && submitted && InvalidFields.ExpirationCancellationDate}">
       <input  type="tel" class="col-md-2 form-control datefield" id="ExpirationCancellationDate"
                     name="ExpirationCancellationDate" ng-model="ModelData.ExpirationCancellationDate"
                     ip-regex="date" 
                     ng-required="ModelData.InsuranceOnProperty == 'Y' || ModelData.PrevInsExpDays == 'A'" 
                     ip-required />
       <img alt="calendar" src="img/calendar.png" class="calendarimage" />
       <span ng-show="InsuredPortalForm.ExpirationCancellationDate.$invalid && submitted && InvalidFields.ExpirationCancellationDate"
              class="help-block">Previous Policy Expiration/Cancellation Date is Required.</span>
</div>