AngularJS标签页校验需求：投保人数据合法才可切换至其他标签页

我懂你现在的困扰——想让"Otros"标签页只有在"投保人数据"的必填项都填对了才能切换，之前用ng-disabled没起作用对吧？这是因为UI Bootstrap的uib-tab有自己的属性规则和切换逻辑，咱们换个方式来实现：

核心问题分析 #

• 表单上下文缺失：你的输入框没有包裹在表单容器里，AngularJS没法生成对应的表单控制器，自然拿不到校验状态。
• 用错了属性：uib-tab不支持ng-disabled，它的官方禁用属性是disable；而且光禁用还不够，得拦截切换事件防止用户通过其他方式跳转。

完整解决方案 #

1. 调整HTML结构，添加表单上下文 #

把第一个标签页的输入框包裹在ng-form里，给表单命名以便在控制器中获取状态，同时添加校验提示：

<uib-tab heading="Datos del asegurado" class="btn-sm">
  <ng-form name="$ctrl.datosAseguradoForm">
    <legend>Datos del Asegurado de Vida</legend>
    <div class="collapsedDetalle">
      <div layout-gt-sm="row" class="margin-top-20">
        <md-input-container class="md-block" flex-gt-sm>
          <label>Nombre</label>
          <input name="nombre" ng-model="$ctrl.datos.DATOS_TOMADOR.NO_NOMBRE" required>
          <div ng-messages="$ctrl.datosAseguradoForm.nombre.$error" ng-if="$ctrl.datosAseguradoForm.nombre.$touched">
            <div ng-message="required">Nombre es obligatorio</div>
          </div>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label>Primer apellido</label>
          <input name="primerApellido" ng-model="$ctrl.datos.DATOS_TOMADOR.NO_APELLIDO1" required>
          <div ng-messages="$ctrl.datosAseguradoForm.primerApellido.$error" ng-if="$ctrl.datosAseguradoForm.primerApellido.$touched">
            <div ng-message="required">Primer apellido es obligatorio</div>
          </div>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label>Segundo apellido</label>
          <input name="segundoApellido" ng-model="$ctrl.datos.DATOS_TOMADOR.NO_APELLIDO2" required>
          <div ng-messages="$ctrl.datosAseguradoForm.segundoApellido.$error" ng-if="$ctrl.datosAseguradoForm.segundoApellido.$touched">
            <div ng-message="required">Segundo apellido es obligatorio</div>
          </div>
        </md-input-container>
      </div>
    </div>
  </ng-form>
</uib-tab>

<uib-tab heading="Otros" class="btn-sm" 
         disable="!$ctrl.isDatosAseguradoValid()"
         select="$ctrl.canSwitchToOtros()">
  <legend>Modalidad</legend>
  <div class="collapsedDetalle">
    <div layout="row">
      <div flex-gt-sm="50">
        <label>Modalidad</label>
      </div>
    </div>
  </div>
</uib-tab>

2. 在控制器中添加校验逻辑 #

在你的组件/控制器里实现两个函数：一个用来判断表单是否有效，另一个用来拦截切换事件：

// 假设这是你的控制器代码
angular.module('yourApp').controller('YourController', function() {
  var vm = this;

  // 初始化数据对象（如果还没初始化的话）
  vm.datos = {
    DATOS_TOMADOR: {}
  };

  // 判断投保人数据表单是否有效
  vm.isDatosAseguradoValid = function() {
    // 确保表单存在并且所有必填项都通过校验
    return vm.datosAseguradoForm && vm.datosAseguradoForm.$valid;
  };

  // 拦截切换到Otros标签页的事件
  vm.canSwitchToOtros = function() {
    var isValid = vm.isDatosAseguradoValid();
    if (!isValid) {
      // 可以替换成更友好的提示（比如Toast）
      alert('Por favor completa todos los datos obligatorios del asegurado');
      // 返回false阻止标签页切换
      return false;
    }
    return true;
  };
});

关键细节说明 #

• 使用ng-form而非form：因为tab内容可能已经在父表单中，ng-form可以创建嵌套的独立表单上下文，不会干扰父表单的校验逻辑。
• disable属性：让"Otros"标签页在表单无效时显示禁用样式，直观提示用户无法点击。
• select事件拦截：绑定的函数返回false时，UI Bootstrap会阻止切换到该标签页，即使用户用键盘等方式尝试跳转也会被拦截。
• ng-messages提示：给用户明确的校验反馈，让他们清楚知道哪些项需要补全。

这样调整后，就能完美实现你想要的效果：只有当投保人的姓名、姓氏都填写完成且通过校验后，才能切换到"Otros"标签页；否则标签页会被禁用，切换时还会提示用户补全信息。

内容的提问来源于stack exchange，提问作者Richard Sánchez Coliao