2014-11-17 17 views
6

Ho un div in cui non sto usando il tag form e invio il modulo sul pulsante ng-click, ma come posso applicare la convalida del dato archiviato in angulrjs.come applicare la convalida in js angolare senza tag form?

<div ng-controller="AddNewvisaController"> 
<input type="text" class="form-control" ng-model="visa.requirement"> 
<select ng-model="visa.country"> 
    <option value="1">abc<option> 
    <option value="2">xyz<option> 
    <option value="3">pqrs<option> 
</select> 
<button type="submit" data-ng-click="submitvisa()">Submit</button> 
</div> 

risposta

15

È possibile utilizzare la direttiva "ng-form" se davvero non si desidera aggiungere un tag modulo.

<body ng-controller="MainCtrl"> 
    <div ng-form="myForm"> 
    <input type="text" required ng-model="user.name" placeholder="Username"> 
    <button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button> 
    </div> 
</body> 

example

+0

non è working.please mi dia un'altra soluzione. –

+0

hai controllato il link di esempio? non funziona per te? – yairhaimo

+0

Himn ha provato la tua url ma non funziona quando ho modificato il codice seguente –

0

Puoi provare qualcosa sotto,

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

 
myValidationModule.controller('AddNewvisaController', function($scope) { 
 
    $scope.visa = {requirement : "", country : "pqrs"} 
 
    
 
    //initilize to false - it will make sure the disable the submit button 
 
    $scope.enableSubmitButton = false; 
 
    
 
    //Do the watch collection - whenever something changed, this will trigger and then do the validation as per the needs - here i validated as not empty - you can do whatever you wish and if everything is fine, then enable the button 
 
    $scope.$watchCollection(['requirement, country'], function(valueArray) { 
 
    if(valueArray[0] != "" && valueArray[1] != "") { 
 
    $scope.enableSubmitButton = true; 
 
    } else { 
 
     $scope.enableSubmitButton = false; 
 
    } 
 
    }) 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="AddNewvisaController"> 
 
    <input type="text" class="form-control" ng-model="visa.requirement"> 
 
    <select ng-model="visa.country"> 
 
     <option value="1">abc<option> 
 
     <option value="2">xyz<option> 
 
     <option value="3">pqrs<option> 
 
    </select> 
 
    <button type="submit" data-ng-click="submitvisa()" ng-disable="!enableSubmitButton">Submit</button> <!-- introduce the disable directive to make is disable by default and this will acitve if all the required filed had met their validation 
 
    </div> 
 
</div>

Problemi correlati