Javascript 此时是否对可见字段进行表单验证？

我的表格如下：

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

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

因此，这将红色的粗体显示在我的家庭类型2下拉列表中。直到现在一切都好了。如果我在Home Type 2下拉列表中选择任何值，红色将消失，我也可以提交表单（因为Home Type 1仍然隐藏，因此未验证）

但当我做以下事情时，问题就来了：

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

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

假设我的家庭类型2为空，家庭类型1复选框未选中（因此家庭类型1被隐藏），我尝试提交表单

这将触发submit并使Home Type 2变为红色。并停止提交

然后我选中了HomeType1复选框，这样它就可以在屏幕上显示HomeType1。但是这家1型也是红色的

我只想在提交表单并且该字段在提交时可见时验证Home Type 1下拉列表。如果主页类型1在提交时被隐藏，则如果用户在首次提交尝试后选择复选框，则当主页类型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。创建一个新指令
angular.module（'ipRequired'，[]）指令（'ipRequired'，函数（）{
返回{
限制：“A”，
要求：'ngModel'，
链接：功能（范围、要素、属性、ngModel）{
console.log（'init'）；
console.log（scope.InvalidFields）；
scope.InvalidFields[attrs.name]=false；
console.log（'after'）；
console.log（scope.InvalidFields）；
作用域：$on（“$destroy”，函数（）{
delete scope.InvalidFields[attrs.name]；//这将在从屏幕中删除字段时从InvalidFields对象中删除属性
console.log（'destroy'）；
console.log（scope.InvalidFields）；
});
}
};
});
//2. 将其添加到控制器的提交模块中
$scope.InvalidFields={}//在每个控制器的开头添加
$scope.InvalidFields={}//重置
angular.forEach（$scope.InsuredPortalForm.$error.required，函数（字段）{
this[field.$name]=true；//将当前的“invalid”字段添加到$scope.InvalidFields对象中（在forEach上下文中作为“this”传递）
}，$scope.InvalidFields）；
//3. 在每个必填字段中添加此项
//与InvalidFields.ExpirationCancellationDate一样，为InvalidFields.FieldName
需要以前的保单到期/取消日期。

你能做一把plnkr/小提琴吗。