在AngularJS指令模板上应用条件验证

Question

我想在指令模板上应用条件验证。 我有一个下面的下拉列表TransportMode：

当用户选择AIR时，它会显示AIR指令模板。 像：

另一个SEA指令的temlate。 像：

这里我需要的是，在选择下拉列表中的任何值以及视图中显示的相关模板后，用户只能在相关模板中输入最小单个记录时按“保存”按钮。 像：

这是我的验证，无论模板在视图中显示，用户必须在该模板中输入最少1条记录。

我正在尝试下面的代码：

$scope.$watch('vm.manifestCreateDto.airFreights', function (airFreightsData) {            
  vm.manifestform.$setValidity('vm.manifestCreateDto.airFreights', airFreightsData != null && airFreightsData.length > 0);
}, true);
$scope.$watch('vm.manifestCreateDto.seaFreights', function (seaFreightsData) {
  vm.manifestform.$setValidity('vm.manifestCreateDto.seaFreights', seaFreightsData != null && seaFreightsData.length > 0);
}, true);

下面用于在视图中显示模板的代码：

<fieldset class="scheduler-border" ng-show="vm.manifestCreateDto.transportModeId == '1'">
  <legend class="scheduler-border">
  </legend>
  <div class="row" id="divFreight">
    <div class="col-md-12">
      <div ng-model="vm.manifestCreateDto.airFreights" add-air-freight data='vm.manifestCreateDto.airFreights' ng-required='vm.manifestCreateDto.transportModeId == "1"'></div>
    </div>
  </div>
</fieldset>
<fieldset class="scheduler-border" ng-show="vm.manifestCreateDto.transportModeId == '3'">
  <legend class="scheduler-border">
  </legend>
  <div class="row" id="divSeaFreight">
    <div class="col-md-12">
      <div ng-model="vm.manifestCreateDto.seaFreights" add-sea-freight data='vm.manifestCreateDto.seaFreights' ng-required='vm.manifestCreateDto.transportModeId == "3"'></div>
    </div>
  </div>
</fieldset>