Question

我的表格如下：

<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仍然隐藏，因此未经过验证）。

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

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

希望我能够解释我的情况。

Answer 1

经过多次尝试，我自己实现了这个：

//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>

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

1 个答案: