Utilizing Angular to create a user-friendly form where users can input values, with the option to use +/- buttons for easier navigation on tablets and other devices.
I am still learning about Angular and facing some challenges in implementing this feature. I have set up validation, but I am not sure how to proceed with incorporating the +/- buttons. Should I start with a default value in the input field (e.g., 0) and manipulate it using {{count}} that can be incremented or decremented? Or should I directly impact the ng-model?
The current setup does not respond when the buttons are clicked. The form gathers user information, which is then passed to the calculator service for calculations.
HTML
<div class="form-block">
<label for="totalStaff">Number of Staff</label>
<button ng-click="staff.staffTotal--">-</button>
<input class="form-control max-width" type="number" id="totalStaff" name="totalStaff" placeholder="Total Staff"
ng-model="staff.staffTotal"
ng-blur="myform.totalStaff.$touched=true"
ng-required="true"
placeholder="{{myform.totalStaff.$touched && myform.totalStaff.$error.required ? 'Please Enter a value' : 'Induction Courses'}}" ng-class="{'input-error': myform.totalStaff.$touched && myform.totalStaff.$error.required}" />
<button ng-click="staff.staffTotal++">+</button>
</div>
Controller
(function() {
"use strict";
var app = angular.module("app");
app.controller('StaffDetailCtrl', ["$scope", "$location", "CalculatorService", function($scope, $location, calculatorService) {
$scope.clicked = function() {
calculatorService.setStaff($scope.staff);
$location.path('/additionalfeatures');
};
$scope.staff = angular.copy(calculatorService.getStaff());
}]);
}());