Hi,
I’m facing an error with a form validation that is not reconized and i do not understand why.
Concerning part is my form “newpassengerForm”
Here is my template :
<
div ng-controller="CarsListCtrl"> <!-- utilise le controler pour aller chercher les voitures en base -->
<div layout="row" layout-wrap> <!-- wrap fait un retour auto quand 100% de l'espace est prit sur la ligne-->
<div ng-repeat="car in cars">
<div flex layout-margin>
<!-- cré les éléments de ma grilles -->
<md-whiteframe class="md-whiteframe-z2" layout>
<md-content>
<md-toolbar class="md-warn" style="width: 300px;width-max:300px;" >
<div class="md-toolbar-tools">
<div layout="row" layout-align="start center">
<md-icon md-svg-icon="maps:ic_directions_car_24px"></md-icon>
<h3>{{car.carname}}</h3>
</div>
<span flex></span>
<md-button class="md-icon-button" aria-label="Edit car" href="/organizer/editcar/{{car._id}}">
<md-icon md-svg-icon="image:ic_edit_24px"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-list-item ng-style="{'background-color':'#F1F1FF'}">
<div layout-fill class="md-list-item-text">
<h6><span style="color:blue"></span><span style="font-size:10pt">{{ car.startdate | date:'EEE d MMM' }}</span><span style="color:blue"> at </span><span style="font-size:10pt">{{ car.hour }}:{{ car.minutes }}</span> </h6>
<h6><span style="color:blue">Start from</span> : <span style="font-size:10pt">{{ car.startaddress }}</span> </h6>
</div>
</md-list-item>
<md-divider></md-divider>
<md-list-item ng-repeat="user in users | filter:{carid: car._id}">
<md-icon md-svg-icon="social:ic_person_24px" alt="{{user.username}}"></md-icon>
<p>{{ user.username }}</p>
</md-list-item>
<md-list-item ng-repeat="seat in availableSeats(car._id, car.seats) track by $index">
<span ng-hide="goAdd" layout="column" layout-fill layout-align="center center" layout-padding ng-style="{'background-color':'#C3FDB8'}">
<md-button md-no-ink layout-fill class="md-primary" name="add"
ng-click="goAdd=true" arialabel="Click to add a passenger">
<md-icon md-svg-icon="social:ic_person_add_24px"></md-icon> Add passenger
</md-button>
</span>
<span ng-show="goAdd" layout-fill layout="column">
<div layout="row">
<form name="newpassengerForm"
ng-submit="addPassenger(newPassenger, car._id)" style="width:70%"
layout-fill layout-align="start center" novalidate>
<md-input-container >
<label>Passenger name</label>
<input ng-model="newPassenger.username" required>
</md-input-container>
</form>
<div layout="column" style="width:30%" layout-fill>
<md-button md-no-ink class="md-primary" ng-click="addPassenger(newPassenger, car._id)" aria-label="add" layout-fill layout-padding>
<md-icon md-svg-icon="navigation:ic_check_24px"></md-icon>
</md-button>
<md-button md-no-ink ng-click="goAdd=false" aria-label="cancel" layout-fill>
<md-icon md-svg-icon="navigation:ic_close_24px"></md-icon>
</md-button>
</div>
</div>
</span>
</md-list-item>
</md-content>
</md-whiteframe>
</div>
</div>
</div>
</div>
here is my controler :
angular.module('caroster').controller('CarsListCtrl', ['$scope','$stateParams', '$meteor', '$state', '$rootScope',
function ($scope, $stateParams, $meteor, $state, $rootScope) {
$scope.data={};
$scope.cars = $meteor.collection(Cars).subscribe('allCars');
$scope.users = $meteor.collection(Users).subscribe('usersByCar');
//check if form is valide to be sent if yes save the passenger in the car and go back to organizer
$scope.addPassenger = function (user, carId) {
if ($scope.newpassengerForm.$valid){
user.carid=carId;
user.createdAt=new Date();
$scope.users.push(user);
$scope.newPassenger='';
$scope.goAdd=false;
}
};
$scope.occupiedSeats = function(carId) {
return Users.find({carid: carId}).count();
};
//Create an array for each seat available, so we can use ng-repeat + track by $index to display the list of seats
$scope.availableSeats = function(carid,seats) {
return new Array(seats-$scope.occupiedSeats(carid));
};
}]);
Thanks a lot in advance for any help !