AngularJS Material表单验证问题：直接提交未触发空字段错误提示

我懂你这个痛点！AngularJS Material默认的表单验证逻辑确实会有这个小坑：只有当输入框被你点过又离开（也就是touched状态），或者内容被修改过（dirty状态），才会弹出错误提示，但如果打开页面直接点提交，输入框还处于「完全没被碰过」的状态，验证提示就不会触发。下面给你两种简单有效的解决办法：

方案1：修改错误提示的显示条件，结合表单的$submitted状态 #

首先确保你的表单有明确的name属性，然后把错误提示的显示条件里加上表单的$submitted状态——意思是“只要表单被提交过，不管输入框有没有被碰过，只要验证不通过就显示错误”。

示例代码：

<form name="userForm" ng-submit="handleSubmit()">
  <!-- 用户名输入框 -->
  <md-input-container>
    <label>用户名</label>
    <input type="text" name="username" ng-model="user.username" required>
    <div ng-messages="userForm.username.$error" 
         ng-show="(userForm.username.$touched || userForm.$submitted) && userForm.username.$invalid">
      <div ng-message="required">用户名不能为空</div>
    </div>
  </md-input-container>

  <!-- 邮箱输入框 -->
  <md-input-container>
    <label>邮箱</label>
    <input type="email" name="email" ng-model="user.email" required>
    <div ng-messages="userForm.email.$error" 
         ng-show="(userForm.email.$touched || userForm.$submitted) && userForm.email.$invalid">
      <div ng-message="required">邮箱不能为空</div>
      <div ng-message="email">请输入合法的邮箱格式</div>
    </div>
  </md-input-container>

  <md-button type="submit" class="md-raised md-primary">提交表单</md-button>
</form>

方案2：在提交函数里手动标记控件为touched #

如果不想修改每个错误提示的条件，也可以在提交表单时，手动把所有验证不通过的控件标记为touched，强制触发错误提示。

控制器代码示例：

angular.module('myApp', ['ngMaterial'])
.controller('FormController', function($scope) {
  $scope.user = {};

  $scope.handleSubmit = function() {
    // 如果表单无效
    if ($scope.userForm.$invalid) {
      // 遍历所有必填项错误的控件，标记为已触碰
      angular.forEach($scope.userForm.$error.required, function(field) {
        field.$setTouched();
      });
      // 也可以直接标记整个表单为已提交：$scope.userForm.$setSubmitted();
      return; // 阻止后续提交逻辑
    }

    // 表单验证通过，执行提交逻辑
    console.log('表单提交成功:', $scope.user);
  };
});

原理说明 #

AngularJS表单有几个核心状态：

• $pristine：控件从未被修改过
• $touched：控件被点击后失焦过
• $submitted：表单被提交过

默认的错误提示通常只监听$touched或$dirty状态，所以直接提交时这些状态不满足，提示就不会出来。我们通过上述两种方式，要么把$submitted加入显示条件，要么手动触发touched状态，就能让直接提交的场景也触发验证提示。

内容的提问来源于stack exchange，提问作者Dave