AngularJS prüft, ob das Formular im Controller gültig ist

86

Ich muss überprüfen, ob ein Formular in einem Controller gültig ist.

Aussicht:

<form novalidate=""
      name="createBusinessForm"
      ng-submit="setBusinessInformation()"
      class="css-form">
 <!-- fields -->
</form>

In meinem Controller:

.controller(
    'BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, 
              UserService, Photo)
    {

        if ($scope.createBusinessForm.$valid) {
            $scope.informationStatus = true;
        }

        ...

Ich erhalte diesen Fehler:

TypeError: Cannot read property '$valid' of undefined

angularjs

— Rober
quelle

Haben Sie es um die Funktion setBusinessInformation im Controller gewickelt?

— Matsko

3

Code zu fragmentiert, um zu analysieren, was falsch sein könnte ... Erstellen Sie eine einfache Demo in jsfiddle.net oder plunker, die das Problem repliziert. Liegt die Form im Rahmen von BusinessCtrl? kann nicht sagen, ohne mehr zu sehen

— charlietfl

@matsko: Nein. Ich muss diesen Code bei der Controller-Initialisierung ausführen.

— Rober

@ charlietfl: Es gibt nicht viel mehr. Ich entferne Code, um das Beispiel zu vereinfachen. Ja, das Formular sollte im Bereich von BusinessCtrl liegen (der Controller ist auf Routen in app.js eingestellt. Ich füge meine Lösung in einer Antwort unten hinzu. Aber ich weiß nicht, warum dies nicht so funktioniert.

— Rober

109

Versuche dies

im Hinblick auf:

<form name="formName" ng-submit="submitForm(formName)">
 <!-- fields -->
</form>

im Controller:

$scope.submitForm = function(form){
  if(form.$valid) {
   // Code here if valid
  }
};

oder

im Hinblick auf:

<form name="formName" ng-submit="submitForm(formName.$valid)">
  <!-- fields -->
</form>

im Controller:

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};

— Damsorian
quelle

Was ist, wenn ich mehrere Schaltflächen in einem Formular überprüfen möchte?

— Fahad Mullaji

Das hat bei mir funktioniert, aber warum $scope.formName.$validergibt sich undefiniert?

— ps0604

Wenn Sie ng-if verwenden, funktioniert $ scope.formName. $ Valid nicht, und wenn Sie ng-show verwenden, funktioniert $ scope.formName. $ Valid.

— Vaibhav Shaha

2

Dies sollte die beste Antwort sein, einfach. Aber könnten Sie mit dem ungültigen Formular umgehen? Wie können Sie dem Benutzer zeigen, welche Eingaben ungültig sind?

— Nicolas Leucci

1

@ ps0604 auf die formName.$validkann nur in der Vorlage zugegriffen werden, wenn Sie in der Steuerung zugreifen möchten, müssen Sie ein Objekt dafür $scope.forms.formNameund in der Vorlage erstellen : <form name="forms.formName"> überprüfen Sie diesen Kommentar

— Damsorian

29

Ich habe den Controller aktualisiert auf:

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...

— Rober
quelle

Denken Sie auch daran: - Wenn das Formular ein Modal ist, denken Sie daran, den Formularnamen als Punktnotation zu deklarieren, z. B.: "Data.theform", und greifen Sie in Ihrem Controller als $ scope.data.theform

— Jasper

2

Das funktioniert bei mir nicht. Bitte zeigen Sie, wie Sie 'createBusinessForm' in den $ scope des Controllers bringen.

— Cyrf

$ scope Dinge sind weg, jetzt verwenden wir einen Tag vmAnsatz. Können Sie einen Plunker für dieselbe Antwort erstellen, indem Sie den Controller als Syntaxansatz verwenden? Ich kann es nicht tun. Es wird auch für andere hilfreich sein, die nach Antworten im heutigen Kontext suchen. Danke

— ankitd

14

Hier ist eine andere Lösung

Legen Sie eine versteckte Bereichsvariable in Ihrem HTML-Code fest, und verwenden Sie sie dann von Ihrem Controller aus:

<span style="display:none" >{{ formValid = myForm.$valid}}</span>

Hier ist das vollständige Arbeitsbeispiel:

angular.module('App', [])
.controller('myController', function($scope) {
  $scope.userType = 'guest';
  $scope.formValid = false;
  console.info('Ctrl init, no form.');
  
  $scope.$watch('myForm', function() {
    console.info('myForm watch');
    console.log($scope.formValid);
  });
  
  $scope.isFormValid = function() {
    //test the new scope variable
    console.log('form valid?: ', $scope.formValid);
  };
});

<!doctype html>
<html ng-app="App">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>

<form name="myForm" ng-controller="myController">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <tt>userType = {{userType}}</tt><br>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  
  
  /*-- Hidden Variable formValid to use in your controller --*/
  <span style="display:none" >{{ formValid = myForm.$valid}}</span>
  
  
  <br/>
  <button ng-click="isFormValid()">Check Valid</button>
 </form>
</body>
</html>

Erweitern Sie das Snippet

— Enkode
quelle

4

Das BusinessCtrlwird vor dem createBusinessForm's initialisiert FormController. Selbst wenn Sie das ngControllerauf dem Formular haben, funktioniert es nicht so, wie Sie es wollten. Sie können dies nicht ngControllerDirectiveändern (Sie können Ihre erstellen und versuchen, die Priorität auszutricksen.) So funktioniert anglejs.

Siehe dieses plnkr zum Beispiel: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

— Oliver
quelle