it-swarm.com.de

Legen Sie programmgesteuert fest, dass alle Formularfelder bei der Formularübergabe ng-touched sind

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">

Ich versuche, meine Klasse "has-error" für ungültige Felder zu aktivieren, wenn ein Benutzer auf "Senden" klickt. 

Ich würde denken, dass Sie so etwas tun könnten:

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

Es gibt jedoch keine $setTouched-Methode in https://docs.angularjs.org/api/ng/type/form.FormController

EDIT: Realize $setTouched existiert, es ist in https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

30
Derek
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

47
Alex Paramonov

Probieren Sie den kürzlich hinzugefügten $ aus

<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

16
henkieee

Neben Alexeys Antwort können Sie FormController eine neue Methode hinzufügen, die dasselbe tut. Es ist also nicht notwendig, Code von einer Übergabefunktion in eine andere zu kopieren:

// 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.");
    }
};

Falls sich jemand wundert, warum jemand diese Art der Validierung durchführen möchte: Die Überprüfung der iOS-Einschränkung fehlt, daher wird ng-submit auch bei ungültigen Formularen aufgerufen.

6
Klaster_1

Die obigen Antworten haben bei mir nicht funktioniert .. um Touched programmatisch auf true zu setzen.

beispiel: Auch nach Ausführung dieser $scope.frmUser["U_Name"].$setTouched();$scope.frmUser["U_Name"].$invalid ist immer wahr geblieben.

Und die Schaltfläche "Senden" sollte nur aktiviert werden, wenn $scope.frmUser.$invalid ist falsch

Stattdessen funktionierte es gut, die Bereichsvariablen für jedes der Felder, die programmgesteuert von Javascript aus festgelegt werden sollen, auf wahr/falsch zu setzen.

1
Hemant

Wenn Sie Lust haben mit ES6 + lodash fp

import forEach from 'lodash/fp/forEach'

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

<form name="$ctrl.form">...</form>
0
run yards