Programowo ustawić wszystkie pola formularza do NG-poruszył składania formularza

Question

HTML:

<div class="form-group" 
    ng-class="{ 'has-error' : form.firstName.$invalid && form.firstName.$touched }"> 
    <label for="firstName" 
     class="control-label"> 
     First Name 
    </label> 
    <input type="text" 
     name="firstName" 
     id="firstName" 
     ng-model="editableUser.firstName" 
     class="form-control" 
     required> 
    <span class="help-block" 
     ng-show="form.firstName.$error.required && form.firstName.$touched"> 
     First Name is required 
    </span> 
</div> 

<input type="submit" 
     ng-click="submit()" 
     value="Submit" 
     class="btn btn-default"> 

próbuję dostać moją klasę „ma błędów” kopać w poszukiwaniu błędnych pól, gdy użytkownik kliknie złożyć.

byłoby Myślę, że można zrobić coś takiego:

$scope.submit = function() { 
    if ($scope.form.$invalid) { 
    angular.forEach($scope.form.$invalid, function(field) { 
     field.$setTouched(); 
    }); 
    alert("Form is invalid."); 
    } 
}; 

Ale nie ma $setTouched metoda https://docs.angularjs.org/api/ng/type/form.FormController

EDIT: Zrealizować $setTouched istnieje, to w https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 1

if ($scope.form.$invalid) { 
    angular.forEach($scope.form.$error, function (field) { 
     angular.forEach(field, function(errorField){ 
      errorField.$setTouched(); 
     }) 
    }); 
    alert("Form is invalid."); 
} 

plunker: http://plnkr.co/edit/XmvoTkIQ0yvFukrVSz11

Answer 2

Nie jestem pewien, dlaczego uważasz, że musisz "dotknąć" pól, wystarczy użyć regularnego sprawdzania poprawności formularza; wystarczy zawinąć pola w rzeczywisty element formularza, a następnie pozwolić kanciarzowi zająć się sprawdzaniem poprawności. Here is a working example..

Naprawdę nie musisz sprawdzać, czy $ dotknął, a nawet ustawił (chyba że istnieje konkretny powód, dla którego musisz to zrobić?) - po prostu użyj wymaganego atrybutu na polach wejściowych, jeśli są wymagane pola :

<input name="namefield" "text" ng-model="user.firstName" required/> 

Answer 3

Rozszerzenie na odpowiedź Aleksieja, można dodać nową metodę FormController że zrobi to samo, więc nie ma potrzeby, aby skopiować kod z przedłożyć funkcję do drugiego:

// config.js 
export default function config($provide) { 
    $provide.decorator('formDirective', $delegate => { 
     const fn = $delegate[0].controller.prototype 
     if (!('$setTouched' in fn)) fn.$setTouched = function() { 
      if (this.$invalid) { 
       Object.values(this.$error).forEach(controls => { 
        controls.forEach(control => control.$setTouched()) 
       }) 
      } 
     } 
     return $delegate 
    }) 
} 

// controller.js 
$scope.submit = function() { 
    if ($scope.form.$invalid) { 
     $scope.form.$setTouched(); 
     alert("Form is invalid."); 
    } 
}; 

Na wypadek, gdyby ktoś zastanawiał się, dlaczego ktoś chciałby dokonać takiego sprawdzenia poprawności: brak jest sprawdzania poprawności ograniczenia iOS, więc ng-submit zostaje wywołane nawet w przypadku nieprawidłowych formularzy.

Answer 4

Spróbuj ostatnio dodane $ składać

<input type="text" 
    name="firstName" 
    id="firstName" 
    ng-model="editableUser.firstName" 
    class="form-control" 
    required> 
    <span class="help-block" 
    ng-show="form.firstName.$error.required && (form.firstName.$touched || form.$submitted"> 
    First Name is required 

Answer 5

Jeśli masz ochotę uisng ES6 + lodash fp

import forEach from 'lodash/fp/forEach' 

    validate() 
    { 
     forEach(forEach(field => field.$setTouched()))(this.form.$error) 
    } 

<form name="$ctrl.form">...</form>