I have two date-pickers, one text field and a button in one form as below:
<div class="form-group">
<label class="control-label">Date End </label>
<div class="controls">
<p class="input-group" ng-controller="datePickerCtrl">
<input type="text" name="endDate" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="form-group">
<label class="control-label">Staff </label>
<div class="controls">
<input type="text" name="name" class="form-control" ng-model="staff.name">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="btn-group" role="group" aria-label="Close">
<button type="button" class="btn btn-primary" ng-click="userClickedCancel()">Filter</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
As can be seen, each date-picker has the same controller: datePickerCtrl. I would like to have one controller attached to the whole form that will utilise the dates returned by the date-pickers and the text field. However, I'm not sure how to do it since both date-pickers are returning the date as ng-model=dt.
I do not want to copy paste the datePickerCtrl code in multiple places with a different variable to dt in each instance. I also don't want to create one controller and copy the datePickerCtrl into it since I would like to keep the code for date-picker separate. What's the best way to do this? Thanks.
Related
How can I use bootstrap modal dialogs with AngularJS using ui-bootstrap with angular-ui-router? I am new to AngularJS and tried searching the documentation without luck.
I have used this code but the contents behind gets covered:
my main.html :
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<img src="img/dsd.png" style="width: 17px">
</button>
</span>
</div>
<a class="btn btn-success" ui-sref="app.login">Login</a>
<a class="btn btn-danger" ui-sref="app.register">Regiter</a>
</form>
my app.js:
angular.module("myApp",["ngAnimate","ngSanitize","ui.router","ui.bootstrap","mds"])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("app",{
url:"/app",
views:{
main:{
templateUrl:"templates/main.html",
controller:"appCtrl"
}
}
})
.state("app.register",{
url:"/register",
views:{
sub:{
templateUrl:"templates/register.html",
controller:"registerCtrl"
}
}
})
my modal:
<div id="y" class="modal-dialog">
<div>
<div class="modal-content">
<div class="modal-header btn-danger">
x
SignUp
</div>
<div class="modal-body">
<form ng-submit="register()">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" ng-model="Name" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" ng-model="UserName" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" class="form-control" ng-model="Phone" required>
</div>
<div class="form-group">
<label>Full Address</label>
<textarea class="form-control" ng-model="addr" required></textarea>
</div>
<div class="form-group">
<label>Email address:</label>
<input type="email" class="form-control" ng-model="Email" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" ng-model="Pwd" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
Sudan Store.
</div>
</div>
</div>
</div>
One approach is to use the appendTo option:
From the Docs:
$uibModal's open function
options parameter
appendTo (Type: angular.element, Default: body: Example: $document.find('aside').eq(0)) - Appends the modal to a specific element.
Use the appendTo option to append to an element that will be fully visible.
For more information, see
UI-Bootstap modal Directive API Reference
So for some reason I am only getting the password on click. I've tried moving the div around. I used a div instead of a form. Been trying to figure this out. Please Help.
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-3">
<form class="form-login">
<h4>Welcome</h4>
<input type="text" ng.model="vm.user.name" class="form-control input-sm chat-input" placeholder="username" />
</br>
<input type="text" ng-model="vm.user.password" class="form-control input-sm chat-input" placeholder="password" />
</br>
<div class="wrapper">
<span class="group-btn">
<button type="submit" ng-click="vm.authenticate(vm.user)" class="btn btn-primary btn-md">login <i class="fa fa-sign-in"></i></a>
</span>
</div>
</form>
</div>
</div>
Hya you used ng.model instead of ng-model :3
And a long day it has been indeed
I am still new to Angular but I have an existing application that uses Angular 1.5 pretty heavily.
I have a basic form that I need to add a class to depending on the following criteria:
The form can only have an End Date value or an Active for value. It cannot have both. I was thinking I need to disable the input box of the input not being used.
Ex. If a user inputs a date into the End Date input, then the Active for input will become disabled.
I looked into ng-if but every example I came across was for checking if the entered input variable was empty or equal to a value in a .js controller, not checking if the current entered variable was equal to another entered variable in the form.
<div class="form-group">
<label>End date:</label>
<div class="input-group">
<input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
<span class="input-group-btn">
<button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="form-group">
<label>Or will be active for:</label>
<input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>
Here is a screenshot of my modal where this happens. Ignore the other inputs as they are not affected by the conditions I've laid out.
Thanks
Form Screen Shot
You can use ng-disabled.
//initialize your dates with null
$scope.updatePatientLabel = {};
$scope.updatePatientLabel.active_end_date = null;
$scope.updatePatientLabel.expiration_time_number = null;
HTML:
<input id="endDate" ng-disabled="updatePatientLabel.expiration_time_number !== null" ng-model="updatePatientLabel.active_end_date" />
<input id="activeDate" ng-disabled="updatePatientLabel.active_end_date !== null" ng-model="updatePatientLabel.expiration_time_number" />
You have a few options. Classes, as you mentioned, or ng-if. The ng-if seems more elegant, like so:
<div class="form-group" ng-if="updatePatientLabel.active_end_date != ''">
<label>End date:</label>
<div class="input-group">
<input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
<span class="input-group-btn">
<button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="form-group" ng-if="updatePatientLabel.expiration_time_number > 0">
<label>Or will be active for:</label>
<input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>
Otherwise, you could do an inline conditional outputting "hidden" inside the class attribute only if the value is not present. Something like this:
<div class="form-group {{updatePatientLabel.active_end_date != '' ? '' : 'hidden'}}">
<label>End date:</label>
<div class="input-group">
<input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
<span class="input-group-btn">
<button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="form-group {{updatePatientLabel.expiration_time_number > 0 ? '' : 'hidden'}}">
<label>Or will be active for:</label>
<input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>
I use both in my projects, and either way is perfectly acceptable. Though, ng-if does seem more elegant and a bit more suited for this scenario.
In my form with tag <form name="applyform" ng-submit="processForm(applyform.$valid)" class="form-horizontal" novalidate>
I have a radio button group, one option selected is required.
I'm unable to get this working.
<div class="form-group noMargin">
<label for="aanhef" class="col-sm-2 control-label">Aanhef:</label>
<div class="col-sm-10">
<div class="btn-group" data-toggle="buttons">
<p ng-show="applyform.aanhef.$invalid" class="help-block">
test
</p>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Dhr." value="Dhr." ng-required="!aanhef"> Dhr.
</label>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Mevr." value="Mevr." ng-required="!aanhef"> Mevr.
</label>
<label class="btn btn-default">
<input type="radio" ng-model="aanhef" name="aanhef" id="Fam." value="Fam." ng-required="!aanhef"> Fam.
</label>
</div>
</div>
</div>
I have a form that I auto input the current date into an input field. I want to set the input field to dirty because when it tries to sync with firebase, that input field is not included unless you interact with it.
I have tried the following in many different forms...and I am at a loss.
var now = new Date();
$scope.load = function () {
if (!$rootScope.auth) {
$location.path('/a/');
} else {
$scope.logs = Logs.list($scope);
$scope.newDate = now;
$scope.logForm.$setDirty(true);
}
};
<form name="logForm" novalidate class="css-form">
<div class="form-group input-group">
<input class="form-control" name="action" placeholder="Action" type="text" value="{{newAction}}" ng-model="newAction" required />
<div class="input-group-addon">
<i class="fa fa-rocket"></i>
</div>
</div>
<div class="form-group input-group">
<input class="form-control" name="quantity" placeholder="Quantity" type="number" value="{{newQuantity}}" ng-model="newQuantity" ng-pattern="/^[0-9]*$/" />
<div class="input-group-addon">
<i class="fa fa-plus-square"></i>
</div>
</div>
<div class="form-group input-group">
<input class="form-control" name="location" placeholder="Location" type="text" value="{{newLocation}}" ng-model="newLocation" />
<div class="input-group-addon">
<i class="fa fa-map-marker"></i>
</div>
</div>
<div class="form-group input-group">
<input class="form-control" name="date" placeholder="Date" type="datetime" value="{{newDate}}" ng-model="newDate" />
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
<button class="btn btn-info btn-block" ng-click="create()">Add log</button>
</form>
The form tag creates its own scope, so to have a reliable scope structure, we shouldn't use primitives for the ng-model values.
To ensure, that we have access to the form controller, we have to delay the form initialization into the next digest cycle. This is achieved with the use of the $timeout service.
http://jsbin.com/OvIvIHO/3/
jsbin contains the updated version