8
Я следил за this tutorial около AngularJS Multi-Step Form с использованием UI-маршрутизатора. Форма работает, и я могу сохранить свои данные, но теперь у меня возникают вопросы о том, как проверить каждый шаг в форме.AngularJS многоступенчатая форма проверки
У меня есть следующие формы с полями ввода:
Шаг 1
- номерного знака
Шаг 2
- Имя
- Улица
- Zipcode
- Город
- Телефон
Шаг 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 я следующее (не полный, оставил Не имеет значения вещи из):
// 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>
Первый шаг в моей форме находится в form-license.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>
Но теперь мне интересно, как я могу проверить это, когда нажимают на следующую кнопку .... Он не работает с нормальным обязательным атрибутом.
Может ли кто-нибудь помочь мне с этим?
UPDATE:
Теперь у меня есть в моем первом шаге следующее:
<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 ли? И мне нужно добавить их к ng-disabled моей кнопки?
И что вы имеете в виду с помощью специальных проверок проверки? Например, требуется. Просто проверьте: if (newVal) {validated = true; }. Как это? – nielsv
И как я могу показать ошибки пользователю? – nielsv
Нет, 'newVal' - это какой бы ни был вход, это не объект формы, поэтому нет проверки' newVal. $ Valid'. Я имею в виду, скажем, что вы хотите убедиться, что лицензия не менее 20 символов и содержит буквы и цифры или что-то еще. Вы можете сделать регулярное выражение против этого. Угловая '. $ Valid' проверяет очень ограниченные критерии. Например, если есть вход или он пуст и т. Д. – jnthnjns