Wie kann die AngularJS-Validierung für Schaltflächen außerhalb des Formulars aktiviert werden?

Ich bin neu zu eckig, ich wurde geschlagen, um eine Formularvalidierung mit der Schaltfläche außerhalb des Formulars auszulösen. Ich habe zwei Tasten eine Innenform, die arbeitet und eine außerhalb, ich möchte, dass die außerhalb Taste die gleiche Aufgabe wie innerhalb einerWie kann die AngularJS-Validierung für Schaltflächen außerhalb des Formulars aktiviert werden?

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> 
    <p>Username: 
     <br> 
     <input type="text" name="user" ng-model="user" required> 
     <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
      <span ng-show="myForm.user.$error.required">Username is required.</span> 
     </span> 
    </p> 
    <p>Email: 
     <br> 
     <input type="email" name="email" ng-model="email" required> 
     <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
      <span ng-show="myForm.email.$error.required">Email is required.</span> 
      <span ng-show="myForm.email.$error.email">Invalid email address.</span> 
     </span> 
    </p> 
    <p> 
     <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
              myForm.email.$dirty && myForm.email.$invalid"> 
    </p> 
</form>

MY Plunker zu tun http://plnkr.co/edit/QObTwo1FcX4pC4f9sAL6?p=preview

Jede Hilfe wird geschätzt

Quelle

2016-06-30 Coeus

Lösung

Um es müssen Sie bewegen Sie die Taste in Angular Anwendungsbereich funktioniert, für die Sie benötigen ng-app="myApp" ng-controller="validateCtrl" von Ihrem <form> Tag <body> Tag zu bewegen, auch müssen Sie innerhalb sicher <button> Tag hat gleiche ng-disabled Attribut als Taste.

Full-Demo

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 
<body ng-app="myApp" ng-controller="validateCtrl"> 
 
    <h2>Validation Example</h2> 
 
    <form name="myForm" novalidate> 
 
    
 
     <p>Username:<br> 
 
     <input type="text" name="user" ng-model="user" required> 
 
     <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
 
      <span ng-show="myForm.user.$error.required">Username is required.</span> 
 
     </span> 
 
     </p> 
 
    
 
     <p>Email:<br> 
 
     <input type="email" name="email" ng-model="email" required> 
 
     <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
 
      <span ng-show="myForm.email.$error.required">Email is required.</span> 
 
      <span ng-show="myForm.email.$error.email">Invalid email address.</span> 
 
     </span> 
 
     </p> 
 
    
 
     <p> 
 
      <input type="submit" 
 
        ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
 
           myForm.email.$dirty && myForm.email.$invalid"> 
 
     </p> 
 
    
 
    </form> 
 
    
 
    <button ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
 
         myForm.email.$dirty && myForm.email.$invalid"> 
 
     another outside button to trigger form 
 
    </button> 
 
    
 
    <script> 
 
     var app = angular.module('myApp', []); 
 
     app.controller('validateCtrl', function($scope) { 
 
      $scope.user = 'John Doe'; 
 
      $scope.email = '[email protected]'; 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

Quelle

2016-06-30 11:58:26 gevorg

Wie kann die AngularJS-Validierung für Schaltflächen außerhalb des Formulars aktiviert werden?

Antwort

Verwandte Themen