AngularJS-Formularvalidierung: Fehlermeldung nach dem Klicken auf "Senden" anzeigen

Question

Wie kann ich mit AngularJS eine Fehlermeldung für ein Kontrollkästchen nach einem Klick auf Senden anzeigen, wenn das Kontrollkästchen nicht aktiviert ist?

Ich versuchte dies:

<form action="/" method="post" name="myForm" novalidate> 
    <label> 
     <input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required> 
    </label> 
    <p class="error" ng-show="myForm.$submitted && myForm.myCheckbox.$error.required">Error message</p> 
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button> 
</form> 

Aber es hat nicht funktioniert. Wenn ich auf Senden klicke, passiert nichts. Wenn ich "novalidate" auf dem Formular-Tag oder "ng-disabled" auf dem Submit-Button entferne, wird das Formular gesendet, auch wenn das Kontrollkästchen nicht aktiviert ist.

Können Sie mir bitte helfen?

Answer 1

Sie haben ng-disabled="myForm.$invalid" in Ihrer Absenden-Button, so nie einreichen Ereignis ausgelöst wird (weil die Schaltfläche deaktiviert ist, wenn das Formular ungültig ist) und damit die Bedingung ng-show="myForm.$submitted && myForm.myCheckbox.$error.required" nie erfüllt ist, weil myForm.$submitted falsch ist.

Edit:

Wie einige andere Benutzer hier vorgeschlagen haben, denke ich, die beste Wahl wäre, wenn Sie die Art und Weise ändern Sie die Dinge jetzt tun. Ich kann im Schlepptau Lösungen denken (sehr ähnlich), aber sie enthält die Anforderung „die Winkel Art und Weise“

• Lösung 1 zu senden:

Griff Sie Einreichformular mit Winkel wie folgt aus:

Put in Ihrem Formular so etwas wie diese (beachten Sie, dass ich den action="/" method="post" Teil gestrichen:

<form ng-submit="onSubmit(myForm)" name="myForm" novalidate> 

und entfernen Sie die ng-disabled="myForm.$invalid" von Ihrem Absenden-Button. Dann würde es sein, diese <button type="submit">Submit</button>

... und in der Steuerung

$scope.onSubmit = function(form){ 
    if(form.$invalid){ 
     //... do your call to backend here as you like since the call directly from the form was removed 
    } 
} 

• Lösung 2:

Neben Form ändern wie folgt aus: <form name="myForm" novalidate>

... ändern Sie Ihre Absenden-Schaltfläche wie folgt: <button type="submit" ng-click="onSubmit(myForm)">Submit</button>

...und verwenden die gleiche Funktion in der Steuerung erklärt

$scope.onSubmit = function(form){ 
     if(form.$invalid){ 
      //... do your call to backend here as you like since the call directly from the form was removed 
     } 
    } 

Ansonsten Sie haben Ihren Zustand zu ändern, wie diese

ng-show="myForm.myCheckbox.$error.required"

aber dies wird die Meldung, bevor das Formular abgeschickt wird

Answer 2

Entfernen Sie myForm.$submitted, weil es nie erfüllt wird (As Asiel Leal erwähnt) und auch Sie haben ng-disabled auf submit bu gesetzt tton, so sicher zu verwenden.

<form action="/" method="post" name="myForm" novalidate> 
    <label> 
     <input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required> 
    </label> 
    <p class="error" ng-show="myForm.$dirty && myForm.myCheckbox.$error.required">Error message</p> 
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button> 
    </form> 

Answer 3

Versuchen Sie, dieses Arbeitsbeispiel:

var app = angular.module('myApp',[]); 
 

 
app.controller('myController',function($scope) { 
 
    $scope.validate = function() { 
 
    alert('submitting..'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app= "myApp" ng-controller="myController"> 
 
    <form name="myForm" ng-submit="myForm.$valid && validate()" novalidate> 
 
       <input type="checkbox" name="checkb" ng-model="formData.checkb" required/> 
 
       <span ng-show="submitted == true && myForm.checkb.$error.required">Please select the checkbox to proceed.</span> 
 
     <input type="submit" value="Submit" ng-click="submitted = true"/> 
 
    </form> 
 
</div>