手动将脏设置为字段不会修改 css 类 angularJS

Manually Setting dirty to a field does not modifies the css classes angularJS?

本文关键字：修改 css angularJS 字段 设置      更新时间：2023-09-26

我有一个使用角度js的表单。在表单提交时，如果字段无效，我将字段设置为脏。但问题是，即使在将字段设置为脏之后，它也不会更改字段上的 CSS 属性。 ng-pristine类仍然保留在这些元素上。将字段设置为脏后，它不会将类更改为ng-dirty。

提交表单后，您可以看到错误消息，但它没有应用 ng-dirty css 类。

var sampleApp = angular.module("sampleApp", []);
sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout',
  function($scope, $http, $timeout) {
    $scope.userData = {
      fname: "",
      lname: ""
    };
    $scope.submitted = false;
    $scope.submitForm = function(registrationForm) {
      $scope.registrationForm.fname.$dirty = true;
	  $scope.registrationForm.lname.$dirty = true;
      if (registrationForm.$invalid) {
        alert("form validation error.");
        return;
      } else {
        alert("form submitted successfully.");
      }
    }
  }
]);
input.ng-invalid {
  border: 1px solid red;
}
input.ng-valid {
  border: 1px solid green;
}
input.ng-pristine {	
  border-color: #FFFF00;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="script.js"></script>
<html ng-app="sampleApp">
<body ng-controller="sampleCtrl">
  <form name="registrationForm" ng-submit="submitForm(registrationForm)" novalidate>
    First Name*
    <br>
    <input type="text" name="fname" ng-model="userData.fname" required>&nbsp;&nbsp;
    <span ng-show="registrationForm.fname.$dirty && registrationForm.fname.$error.required">
				First name is required.
			</span>
    <br>Last Name*
    <br>
    <input type="text" name="lname" ng-model="userData.lname" required>&nbsp;&nbsp;
    <span ng-show="registrationForm.lname.$dirty && registrationForm.lname.$error.required">
				Last name is required.
			</span>
    <br>
    <br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

替换

$scope.registrationForm.lname.$dirty

跟

$scope.registrationForm.lname.$setDirty();

$setDirty（）;

将窗体设置为脏状态。

可以调用此方法来添加"ng-dirty"类并设置表单 到脏状态（ng-脏类）。此方法还将传播到 父窗体。

AngularJS Doc

相关文章：