eckig form validation focus

Question

Wenn Sie versuchen, eine Formularüberprüfung durchzuführen, wenn die Eingabe bei der Übergabe leer ist, sollte sie sich auf dieses leere Feld konzentrieren. Ich durchlaufe die element.class, um .focus() zu tun, aber ich weiß nicht, wie ich herausfinden kann, welche leer ist und auf dieses Feld zu fokussieren.

var refocusInput = function() { 
      $timeout(function(){ 
       var inputHasError = document.getElementsByClassName("form-control"); 
       for (var i = 0; i < inputHasError.length; i++) { 
        var element = inputHasError[i]; 
        if(element){ 
         console.log(inputHasError); 
         inputHasError[i].focus(); 
         console.log('focus') 
        } 
       } 
     }) 
    } 
vm.publishForm = function(){ 
    refocusInput(); 
} 

Answer 1

Sie Winkel verwenden daher können Sie immer die ng-form Attribut verwenden und die $valid Eigenschaft

ist das Beispiel von Winkel Dokumentationlink

angular.module('formExample', []) 
 
    .controller('FormController', ['$scope', 
 
    function($scope) { 
 
     $scope.userType = 'guest'; 
 
     $scope.submit = function(e) { 
 
     $scope.isValid = $scope.myForm.$valid 
 
     } 
 
    } 
 
    ]);

.my-form { 
 
    transition: all linear 0.5s; 
 
    background: transparent; 
 
} 
 
.my-form.not-valid{ 
 
    background: red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="formExample"> 
 

 
    <form name="myForm" ng-controller="FormController" ng-class="{'not-valid' : !isValid}" class="my-form"> 
 
    userType: 
 
    <input name="input" ng-model="userType" required> 
 
    <span class="error" ng-show="myForm.input.$error.required">Required!</span> 
 
    <input type='button' ng-click='submit($event)' value='submit' /> 
 
    <br> 
 
    <code>userType = {{userType}}</code> 
 
    <br> 
 
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code> 
 
    <br> 
 
    <code>myForm.input.$error = {{myForm.input.$error}}</code> 
 
    <br> 
 
    <code>myForm.$valid = {{myForm.$valid}}</code> 
 
    <br> 
 
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code> 
 
    <br> 
 
    </form> 
 
</div>