Set a form input to dirty in angularjs? - angularjs

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

Related

AngularJS UI-Bootstrap Modal Dialog gets covered by main.html

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

Ng-click validation is not working

I am beginer in angular js. I am validating a form with some input feild and form is posting on ng-click but validation is not working, validation message are displaying for a white then disappear i have to submit the form after validating. form ng-click should not be called untill the form is valid please help me . Thanks in advance.
<form name="teamForm" novalidate ng-submit="submit(teamForm)" class="formfields">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">First Name:</label>
<input type="text" name="firstname"
ng-model="FirstName" class="form-control custom-form-control"
placeholder="First Name" required="required">
<span class="text-danger"
ng-show="(teamForm.firstname.$dirty || submitted) && teamForm.firstname.$error.required">Required</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" name="lastname"
ng-model="LastName" class="form-control custom-form-control"
placeholder="Last Name" required="required">
<span class="text-danger"
ng-show="(teamForm.lastname.$dirty || submitted) && teamForm.lastname.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email">Email:</label>
<input type="text" name="email"
ng-model="Email" class="form-control custom-form-control"
ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/"
placeholder="Email" required="required">
<span class="text-danger"
ng-show="(teamForm.email.$dirty || submitted) && teamForm.email.$error.required">Required</span>
<span class="text-danger"
ng-show="teamForm.email.$dirty &&teamForm.email.$error.pattern">Please Enter Valid Email</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Phone Number:</label>
<div class="clearfix"></div>
<input type="text" name="phone"
ng-model="Phone" class="form-control custom-form-control"
placeholder="XXXXXXXXXX" required="required">
<span class="text-danger"
ng-show="(teamForm.phone.$dirty || submitted) && teamForm.phone.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Message:</label>
<textarea class="form-control rounded-0" rows="5"
name="comment" placeholder="Message"
ng-model="Comment" required="required"></textarea>
<span class="text-danger"
ng-show="(teamForm.comment.$dirty || submitted) && teamForm.comment.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Upload Resume:</label>
<!--<input type="file" name="ResumePath" id="filehandler" />-->
<input type="file" id="file1" name="file" class="filelabel sr-only" multiple ng-files="getTheFiles($files)" onchange="Checkfiles($(this))" />
<!-- <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> -->
<label for="file1" class="form-control">
<span><i class="fa fa-file"></i> Drag file here or choose file</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div vc-recaptcha key="'6Lc860IUAAAAAAyWI9WD8EV4eITu4ODdhuYHdzi8'"
class="grecaptcha" ng-model="respone1"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="button" id="btnSubmit"
ng-click="uploadFiles()" value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
</div>
</div>
<div class="form-group text-center">
<h5 class="text-success" style="font-weight:bold">{{messagesuccess}}</h5>
<h5 class="text-danger" style="font-weight:bold">{{messageerror}}</h5>
</div>
</div>
</form>
ng-click (or it's vanilla cousin, onclick) do not check form validation. The function for submission needs to be defined at the form level, and then you specify which button acts as the submit button in order to get form behavior.
I see you already have a submit function defined. I assume you want to change that to uploadFiles. And if you want the form to conduct validation, remove the novalidation attribute.
<form name="teamForm" ng-submit="uploadFiles()" class="formfields">
then, for the button you would specify it is the submission button and remove the ng-click.
<button type="submit" id="btnSubmit"
value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>

Angular.js ng-click not registering ng-model on form

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

ng-model-option rollback changes on whole form

have a quick question.
I have a form with whole bunch of fields that could be updated from UI.
I found a directive called "ng-model-option" that seems to be handling those kind of issues.
My question is: is it possible to rollback changes on whole form without specifying ng-model-options="{ updateOn: 'submit'}"
on every input fieldin my form?
Or, this directive look on every field and only submit those fields that were modified?
Thank you for your help and explanation in advance!
You could have all of your fields bound to a single object, i.e.
$scope.model = {
foo: '',
bar: '',
etc: ''
};
That way you could store a copy of the model, and reset the bound model at any point you wish.
For example to undo all of the changes after a failed service call:
$scope.submit = function() {
yourService.update(model).then(function(result) {
// handle the success.
}, function(err) {
$scope.model = $scope.originalModel;
});
}
Or maybe reloading the page is an option for you?
$window.location.reload();
i found a solution by using and mapping everything to ng-model-option directive
<form name="EditUserForm" class="col-md-12 form-horizontal top-buffer">
<div class="form-group">
<div class="col-sm-4 text-right">
<label>User Id:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.UserID" ng-disabled="true" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Department Name:</label>
</div>
<div class="col-sm-8">
<!--<input type="text" class="form-control info-textbox" ng-model="user.Department.DepartmentName" ng-readonly="isReadOnlyMode" />-->
<select class="form-control info-textbox" ng-options="department.DepartmentName for department in departments"
ng-model="selectedDepartment"
ng-readonly="isReadOnlyMode"
ng-model-options="{updateOn: 'submit'}"></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>First Name:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.FirstName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Last Name:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.LastName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Email:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.Email" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Phone:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.Phone" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Login:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.LoginName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Password:</label>
</div>
<div class="col-sm-8">
<input type="password" class="form-control info-textbox" ng-model="user.Password" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<!--Buttons-->
<div class="form-group">
<div class="col-sm-4 text-right">
<button type="button" class="btn btn-primary info-button" name="btnEdit" ng-click="flipBetweenEditMode(isReadOnlyMode)" ng-show="isReadOnlyMode">
<span>Edit</span>
</button>
<button type="button" class="btn btn-primary info-button" name="btnEdit" ng-click="flipBetweenEditMode(isReadOnlyMode)" ng-show="!isReadOnlyMode">
<span>Cancel</span>
</button>
</div>
<div class="col-sm-4 text-left">
<button type="submit" class="btn btn-primary info-button" name="btnSave" ng-click="saveChangesToUser(user, isReadOnlyMode)" ng-show="!isReadOnlyMode">
<span>Save</span>
</button>
</div>
<div class="col-sm-4 text-left">
<div back-button></div>
</div>
</div>
</form>
and then controller
$scope.flipBetweenEditMode = function (isReadOnlyMode) {
if (!isReadOnlyMode) {
$scope.EditUserForm.$rollbackViewValue();
}
console.log(isReadOnlyMode);
$scope.isReadOnlyMode = !isReadOnlyMode;
};
on cancel this will roll back all the changes and restore model at its first stage.

Duplicate form names in ng-repeat

I have a form editQuoteCardForm within an ng-repeat that is repeated multiple times. The form is tied to the editQuoteCard model. When a user clicks the edit button, the form is prepopulated with the correct data for the current model.
The problem I'm having is that I can't validate the form by calling editQuoteCardForm.$valid because there are multiple instances of editQuoteCardForm in the DOM. In fact, if I call $scope.editQuoteCardForm within a debugger session, it returns undefined.
My question is, how can I properly handle the form name within an ng-repeat in such a way that I can validate the form?
Here is the code for my form:
<div ng-repeat="c in quoteCards" style="display:none;" id="{{'edit_quote_card_' + c.id + '_form_container'}}">
<div class="row" id="{{'edit_quote_card_' + c.id + '_form'}}">
<div class="col-lg-12">
<div class="row-scrollable" ng-show="view === 'quote-card'">
<div class="col-lg-12">
<form accept-charset="UTF-8" name="editQuoteCardForm" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" ng-model="editQuoteCard.token">
<input name="id" type="hidden" ng-model="editQuoteCard.id">
<div class="form-group">
<label>Title</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="title" ng-model="editQuoteCard.title" required>
</div>
<div class="form-group">
<label>Attribution</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="attribution" ng-model="editQuoteCard.attribution">
</div>
<div class="form-group">
<label>Quote</label>
<br style="clear:both;" />
<textarea rows="3" class="form-control" name="quote" ng-model="editQuoteCard.quote" required></textarea>
</div>
<div class="form-group">
<label>Media</label>
<br style="clear:both;" />
<input type="hidden" class="form-control" name="photo" ng-model="editQuoteCard.image">
<input type="hidden" class="form-control" name="video" ng-model="editQuoteCard.video">
<div class="profile-builder attachment">
<div ng-show="editQuoteCard.video" class="content video-content result iframe">
<div class="caption delete-btn" ng-click="editQuoteCard.video = undefined;">
<i class="fa fa-times"></i>
</div>
<iframe ng-if="editQuoteCard.video.media_type === 'Youtube'" ng-src="{{editQuoteCard.video.media_url + '?showinfo=0&autohide=1' | trustAsResourceUrl}}" frameborder="0" id="ytplayer" type="text/html"></iframe>
<iframe ng-if="editQuoteCard.video.media_type === 'Vimeo'" ng-src="{{editQuoteCard.video.media_url + '?badge=0&byline=0&title=0' | trustAsResourceUrl}}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div ng-show="editQuoteCard.image" class="content result">
<div class="delete-btn" ng-click="editQuoteCard.image = undefined;">
<i class="fa fa-times"></i>
</div>
<div class="image-container" ng-style="{'background-image': 'url(' + editQuoteCard.image.image_url + ')'}"></div>
</div>
</div>
</div>
<br style="clear:both;" />
<div class="form-group">
<input class="btn btn-primary" style="float:right;" name="commit" type="submit" value="Update Card" ng-disabled="editQuoteCardForm.$invalid">
<div class="btn btn-default" style="float:right;margin-right:10px;" ng-click="openMediaBrowser({type: c.class, id: c.id, index: $index});" ng-show="!editQuoteCard.image && !editQuoteCard.video">Add Media</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You can create name for each form dynamically.
<form accept-charset="UTF-8" name="editQuoteCardForm{{$index}}" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
</form>
So, your forms will be named,
editQuoteCardForm0, editQuoteCardForm1, editQuoteCardForm2 etc.

Resources