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

Question

The error effect (ng-invalid) shows as soon as you select a field. How can I stop this when:

1. When I haven't typed anything yet
2. When I'm still typing

Solution to either one would be great.

Answer 1

Use the ng-touched class in addition to ng-invalid

See the documentation: 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

You may want to use ng-model-options settings' updateOn (what event should the model value be updated) and allowInvalid (only if you still need model value to be set with invalid value). Set updateOn to blur . Remember you can set the ng-model-options at the top level if you dont want to repeat for every element.

Example:-

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

Demo