Question

选择字段后，会立即显示错误效果（ng-invalid）。如何在以下情况下停止此操作：

当我还没有打字时
当我还在打字时

任何一个解决方案都很棒。

Answer 1

除ng-touched

外，请使用ng-invalid课程

请参阅文档：https://docs.angularjs.org/guide/forms

input.one.ng-invalid { border: 2px solid red; }
input.two.ng-invalid.ng-touched { border: 2px solid red; }

var app = angular.module('snipApp', []);
app.controller('SampleCtrl',['$scope',function($scope){
  $scope.inputs = {}
}]);

input.one.ng-invalid { border: 2px solid red; }
input.two.ng-invalid.ng-touched { border: 2px solid red; }

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<div ng-app="snipApp">
<div ng-controller="SampleCtrl">
  <form name="myform">
    <div>without touched: 
      <input type="text" name="one" ng-model="inputs.one" ng-minlength="4" class="one">
    </div>
    <div>with touched: 
      <input type="text" ng-model="inputs.two" ng-minlength="4" class="two">
    </div>
    <div><pre>{{inputs|json}}</pre></div>
  </form>
</div>
</div>

Answer 2

您可能希望使用ng-model-options设置'updateOn（模型值应更新的事件）和allowInvalid（仅当您仍需要使用无效值设置模型值时））。将updateOn设为blur。请记住，如果您不想为每个元素重复，可以在顶级设置ng-model-options。

实施例： -

 <input type="number" name="num2" ng-model="num2"  ng-model-options="{'updateOn':'blur'}">

<强> Demo

如何在键入时删除Angular ng-invalid？

2 个答案: