AngularJS 1.x表单初始加载时如何保持错误消息为空？

我来帮你搞定这个表单验证的问题！核心思路是利用AngularJS表单内置的$submitted状态，让错误消息只在表单提交后才显示，而不是页面一加载就冒出来。下面分不同控件类型详细说明：

一、文本输入框（比如你的First Name字段） #

首先，你需要给表单和控件加上name属性，AngularJS依赖这些名称来跟踪表单状态。完整示例代码如下：

<form name="userForm" ng-submit="submitForm()">
  <p>First Name:
    <input type="text" id="firstName" name="firstName" ng-model="user.firstName" required>
  </p>
  <!-- 错误提示：只有表单提交且字段未填写时显示 -->
  <span ng-show="userForm.firstName.$error.required && userForm.$submitted" style="color: red;">
    First Name is required!
  </span>

  <button type="submit">Submit</button>
</form>

关键逻辑解释： #

• userForm.$submitted：表单提交后这个状态会变成true，初始加载时是false，这是控制错误消息显示的核心开关。
• userForm.firstName.$error.required：当文本框未填写（且设置了required属性）时，这个状态为true。
• 两者用&&结合，就实现了只有提交表单且字段未填时才显示红色错误提示。

二、单选框的特殊处理 #

单选框是一组控件，需要共享同一个name属性，并且绑定到同一个ng-model。错误提示的逻辑和文本框类似，但要注意required属性的设置：

<form name="userForm" ng-submit="submitForm()">
  <p>Gender:
    <input type="radio" name="gender" ng-model="user.gender" value="male" required> Male
    <input type="radio" name="gender" ng-model="user.gender" value="female"> Female
  </p>
  <!-- 单选框错误提示：提交后未选任何选项时显示 -->
  <span ng-show="userForm.gender.$error.required && userForm.$submitted" style="color: red;">
    Please select your gender!
  </span>

  <button type="submit">Submit</button>
</form>

注意点： #

• 只需要给组里的一个单选框加上required即可，AngularJS会识别这是一组，只要没有任何选项被选中，就会触发$error.required。
• 错误提示的显示条件和文本框完全一致，依赖$submitted状态。

三、下拉框（Select）的处理 #

下拉框需要设置一个默认的空选项（value=""），再结合required属性来触发未选择的错误：

<form name="userForm" ng-submit="submitForm()">
  <p>Country:
    <select name="country" ng-model="user.country" required>
      <option value="">-- Please Select --</option>
      <option value="usa">United States</option>
      <option value="canada">Canada</option>
      <option value="uk">United Kingdom</option>
    </select>
  </p>
  <!-- 下拉框错误提示：提交后未选择时显示 -->
  <span ng-show="userForm.country.$error.required && userForm.$submitted" style="color: red;">
    Please select your country!
  </span>

  <button type="submit">Submit</button>
</form>

逻辑说明： #

• 当用户选中默认的空选项时，ng-model的值为空，结合required属性，userForm.country.$error.required会变成true。
• 同样通过userForm.$submitted控制，只有提交后才显示错误。

通用规则总结 #

所有表单控件的错误提示逻辑都遵循这个模式：

<span ng-show="表单名称.控件名称.$error.错误类型 && 表单名称.$submitted" style="color: red;">
  错误提示文本
</span>

如果之后需要扩展验证（比如邮箱格式、最小长度），只需要把$error.required换成对应的错误类型（比如$error.email、$error.minlength），同时保留$submitted的判断即可。

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