AngularJS表单中ng-pristine始终返回true的问题咨询

你的代码存在的核心问题是输入框未绑定ng-model指令。AngularJS依赖ng-model来追踪表单控件的状态变更（比如从原始状态变为已修改状态），没有该绑定的话，表单无法感知输入框内容的变化，因此$pristine会始终保持true。

修改后的完整代码 #

test.html #

<div ng-app="myModule">
  <div ng-controller="myController">
    <form name="myForm" ng-submit="su()">
      <!-- 新增ng-model绑定，让AngularJS监控输入变化 -->
      <input name="input1" type="text" ng-model="formData.input1">

      <button id="button1" type="submit">>>>>>>></button>
    </form>
    
    myForm.$pristine : {{results}}
    
  </div>
</div>

test.js #

var module = angular.module("myModule", []);

module.controller("myController", function($scope) {
    $scope.su = su;
    $scope.results = "default";
    // 初始化表单数据对象，避免绑定时报错
    $scope.formData = {};
    
    function su()
    {
        $scope.results = $scope.myForm.$pristine;
    }
});

关键说明 #

• 添加ng-model="formData.input1"后，AngularJS会实时监控输入框内容，当用户输入内容时，表单的$pristine会自动切换为false，$dirty变为true。
• 控制器中初始化$scope.formData = {}是为了防止AngularJS抛出Cannot set property 'input1' of undefined的错误，确保绑定的目标对象存在。

内容的提问来源于stack exchange，提问作者김영민