एंगुलरजेएस मल्टी-स्टेप फॉर्म सत्यापन

मैंने this tutorialयूआई राउटर का उपयोग करके कोणीय जेएस मल्टी-स्टेप फॉर्म का पालन किया है। फॉर्म काम करता है और मैं अपना डेटा सहेज सकता हूं लेकिन अब मुझे फॉर्म में प्रत्येक चरण को सत्यापित करने के तरीके के बारे में प्रश्न हैं।एंगुलरजेएस मल्टी-स्टेप फॉर्म सत्यापन

मैं इनपुट फ़ील्ड वाले निम्न प्रपत्र:

चरण 1

लाइसेंस प्लेट

चरण 2

नाम

स्ट्रीट

ज़िपकोड

शहर

ईमेल

टेलीफोन

चरण 3

एक कैलेंडर से एक तिथि & समय चुनें

यह इस तरह कुछ हद तक दिखता है:

<body ng-app="formApp"> 
    <div id="top"></div> 
    <div class="container"> 
     <!-- views will be injected here --> 
     <div ui-view></div> 

    </div> 
</body>

मैं इस तरह एक सामान्य आधार दृश्य है

// app.js 
// create our angular app and inject ngAnimate and ui-router 
// ============================================================================= 
angular.module('formApp', ['ngAnimate', 'ui.router', 'ui.calendar']) 

// configuring our routes 
// ============================================================================= 
.config(function($stateProvider, $urlRouterProvider, $interpolateProvider) { 

    $interpolateProvider.startSymbol('<%'); 
    $interpolateProvider.endSymbol('%>'); 

    $stateProvider 

     // route to show our basic form (/form) 
     .state('form', { 
      url: '/form', 
      templateUrl: 'views/form.html', 
      controller: 'formController' 
     }) 

     // nested states 
     // each of these sections will have their own view 
     // url will be /form/interests 
     .state('form.license', { 
      url: '/license', 
      templateUrl: 'views/form-license.html' 
     }) 

     // url will be nested (/form/profile) 
     .state('form.profile', { 
      url: '/profile', 
      templateUrl: 'views/form-profile.html' 
     }) 

     // url will be /form/payment 
     .state('form.appointment', { 
      url: '/appointment', 
      templateUrl: 'views/form-appointment.html' 
     }) 

     // url will be /form/success 
     .state('form.success', { 
      url: '/success', 
      templateUrl: 'views/form-success.html' 
     }); 

    // catch all route 
    // send users to the form page 
    $urlRouterProvider.otherwise('/form/license'); 
}) 

// our controller for the form 
// ============================================================================= 
.controller('formController', function($scope, $http, $compile, $location, uiCalendarConfig) { 

    $scope.formData = {}; 
    $scope.formData.profile = {}; 


    $scope.next = function(step){ 

     if(step == 1) 
     { 

     } 
     else if(step == 2) 
     { 

     } 
    }; 

    // function to process the form 
    $scope.processForm = function(isValid) { 

    }; 

});

मेरी सामान्य form.html:

<!-- form.html --> 
<div class="row"> 
    <div class="col-sm-6 col-sm-offset-3"> 

     <div id="form-container"> 
      <form id="appointment-form" name="appointmentform" ng-submit="processForm(appointmentform.$valid)"> 

       <!-- our nested state views will be injected here --> 
       <div id="form-views" ui-view></div> 
      </form> 

     </div> 
    </div> 
</div>

मेरी रूप में पहले चरण में हैमेरी app.js में मैं निम्नलिखित है (पूरा नहीं हुआ, गैर महत्वपूर्ण बातें बाहर छोड़ दिया) फॉर्म-लाइसेंस.html:

<!-- form-license.html --> 
<label>Nummerplaat ingeven</label> 
<div class="form-group"> 
    <div class="col-xs-8 col-xs-offset-2"> 
     <input required type="text" class="form-control" name="license" ng-model="formData.license"> 

    </div> 
</div> 


<div class="form-group row"> 
    <div class="col-xs-4 col-xs-offset-4"> 
     <a ng-click="next(1)" ui-sref="form.profile" class="btn btn-next btn-block"> 
      Volgende 
     </a> 
    </div> 
</div>

लेकिन अब मैं सोच रहा हूं कि जब मैं अगले बटन पर क्लिक करता हूं तो मैं इसे कैसे सत्यापित कर सकता हूं ...। यह सामान्य आवश्यक विशेषता के साथ काम नहीं कर रहा है।

क्या कोई मेरी मदद कर सकता है?

अद्यतन:

अब मैं अपने पहले चरण में है निम्नलिखित:

<div class="col-xs-4 col-xs-offset-4"> 
    <a ng-click="next(1, processForm)" ui-sref="form.profile" ng-disabled="!licenseValidated" class="btn btn-next btn-block"> 
     Volgende 
    </a> 
</div>

मेरी नियंत्रक में:

var validateLicense = function (newVal) { 
    var validated = false; 
    // Run your custom validation checks 
    if(newVal) 
    { 
     validated = true; 
    } 
    return validated; 
}; 

$scope.$watch('formData.license', function (newVal) { 
    $scope.licenseValidated = validateLicense(newVal); 
});

ठीक है, कि काम करता है। लेकिन मेरे दूसरे चरण में मैं इस तरह से अधिक फ़ील्ड है:

<div class="profile"> 
    <div class="form-group"> 
     <label class="col-sm-3 control-label" for="name">Name</label> 
     <div class="col-sm-9"> 
      <input type="text" class="form-control" name="name" ng-model="formData.profile.name"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-sm-3 control-label" for="street">Street</label> 
     <div class="col-sm-9"> 
      <input type="text" class="form-control" name="street" ng-model="formData.profile.street"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-sm-3 control-label" for="zipcode">Zipcode</label> 
     <div class="col-sm-9"> 
      <input type="text" class="form-control" name="zipcode" ng-model="formData.profile.zipcode"> 
     </div> 
    </div> 

    <div class="form-group row"> 
     <div class="col-xs-8 col-xs-offset-2"> 
      <a ng-click="next(1)" ui-sref="form.license" class="btn btn-block btn-previous col-xs-3"> 
       VORIGE 
      </a> 
      <a ng-click="next(2)" ui-sref="form.appointment" class="btn btn-block btn-next col-xs-3"> 
       Volgende 
      </a> 
     </div> 
    </div> 
</div>

मैं उनमें से हर एक एक $ scope.watch के लिए बनाने की जरूरत है? और क्या मुझे उन्हें अपने बटन के एनजी-अक्षम में जोड़ने की ज़रूरत है?

स्रोत

2015-09-24 nielsv

आप बस अगले बटन अक्षम कर सकते हैं यदि सत्यापन सत्यापन में से कोई भी पास नहीं होता है।

कुछ की तरह:

<a ng-click="next(1, appointmentform)" ui-sref="form.profile" class="btn btn-next btn-block" ng-disabled="!licenseValidated"> 
    Volgende 
</a>

फार्म info.html दोहराने यदि उपरोक्त चरणों

<a ng-click="next(1, appointmentform)" ui-sref="form.profile" class="btn btn-next btn-block" ng-disabled="!infoValidated"> 
    Volgende 
</a>

// Inside your controller. 
// Don't overload the scope. 
// Only assign what will be needed through your HTML or other AngularJS Scopes 
var validateLicense = function (newVal) { 
    // If you are only checking for content to be entered 
    return (newVal !== '' && newVal !== undefined); 
}; 
var validateInfo = function (newVal) { 
    if (newVal.length > 0) { 
     // Check to make sure that all of them have content 
     for (var i = 0, l = newVal.length; i < l; i++) { 
      if (newVal[i] === undefined || newVal[i] === '') { 
       return false; 
      } 
     } 
     // We didn't find invalid data, let's move on 
     return true; 
    } 
    return false; 
}; 

var validateDate = function (newVal) { 
    var validated = false; 
    // Run your custom validation checks 
    return validated; 
} 

// Initialize the disabled "Next" buttons 
$scope.licenseValidated = false; 
$scope.infoValidated = false; 

// Watch a single item in a form, if filled in we will let them proceed 
$scope.$watch('formData.license', function (newVal) { 
    $scope.licenseValidated = validateLicense(newVal); 
}); 

// Watch a multiple items in a form, if ALL are filled in we will let them proceed 
// Note that the order in this array is the order the newVal will be, 
// So further validation for formData.number would be on newVal[1] 
$scope.$watchGroup(['formData.name', 'formData.number', 'formData.address'], function (newVal) { 
    $scope.infoValidated = validateInfo(newVal); 
});

फार्म license.html अपने अगले बटन पर ng-disabled विशेषता जोड़ें और इतने पर ...

See this Fiddle for Demo

स्रोत

2015-09-24 16:36:59 jnthnjns

और कस्टम सत्यापन जांच के साथ आपका क्या मतलब है? उदाहरण के लिए, आवश्यक है। बस जांचें: अगर (नया वैल) {मान्य = सत्य; }। इस कदर? – nielsv

और मैं उपयोगकर्ता को त्रुटियों को कैसे दिखा सकता हूं? – nielsv

नहीं, 'newVal' जो भी इनपुट है, यह फॉर्म ऑब्जेक्ट नहीं है इसलिए' newVal। $ Valid' चेक नहीं है। मेरा मतलब है, मान लीजिए कि आप यह सुनिश्चित करना चाहते हैं कि लाइसेंस कम से कम 20 वर्ण हैं और इसमें अक्षरों और संख्याएं या कुछ शामिल हैं। आप इसके खिलाफ एक रेगेक्स परीक्षण कर सकते हैं। कोणीय का '$ मान्य 'केवल बहुत ही सीमित मानदंडों की जांच करता है। जैसे कि इनपुट है या यह खाली है, आदि – jnthnjns

आपके पास इस बात के आधार पर आपके लिए कुछ विकल्प उपलब्ध हैं कि आप इसे कैसे संपर्क करना चाहते हैं।

प्रारंभ करने के लिए, आपको 3 फॉर्म चरणों में से प्रत्येक के लिए ng-form का उपयोग करना चाहिए। यह आपको अन्य वर्गों के बारे में चिंता किए बिना प्रत्येक व्यक्तिगत रूप से मान्य करने की अनुमति देगा।

तो एक उदाहरण के रूप में अपना पहला प्रपत्र कदम बदल सकता में:

<ng-form name="LicenseForm"> 
    <label>Nummerplaat ingeven</label> 
    <div class="form-group"> 
     <div class="col-xs-8 col-xs-offset-2"> 
      <input required type="text" class="form-control" name="license" ng-model="formData.license"> 

     </div> 
    </div> 


    <div class="form-group row"> 
     <div class="col-xs-4 col-xs-offset-4"> 
      <a ng-click="next(1, LicenseForm)" ui-sref="form.profile" class="btn btn-next btn-block"> 
       Volgende 
      </a> 
     </div> 
    </div> 
</ng-form>

यह आपको सिर्फ इस चरण के लिए फ़ॉर्म सत्यापन गुण तक पहुँच देता है। इस बिंदु पर आप फार्म वस्तु है, जो अब next में पारित किया जा रहा सबमिट बटन पर .$invalid या .$valid उपयोग करने के लिए अपने नियंत्रक अद्यतन कर सकते हैं, जिसका अर्थ है कि तुम अब की तरह कुछ कर सकते हैं:

$scope.next = function(step, form) { 
    if (form.$invalid) { 
     console.log('Form is invalid!'); 
     return; 
    } 
    // move to next section 
    ... 
};

स्रोत

2015-09-24 16:17:20 csbarnes

एंगुलरजेएस मल्टी-स्टेप फॉर्म सत्यापन

उत्तर

संबंधित मुद्दे