In controller CommentController I have scope: $scope.comment = {file : {}};
In template there is code:
<form ng-controller="CommentController" class="form-horizontal" name="formComment" enctype="multipart/form-data" novalidate>
<textarea ng-model="comment.body" ng-minlength="5" ng-maxlength="500" class="form-control todo-taskbody-taskdesc" rows="4" placeholder="Type comment..." required autofocus></textarea>
<input type="text" ng-model="comment.file" ng-value="f | ngfDataUrl" ng-repeat="f in files">
</form>
If to make {{comment}} in tempate I can see binding comment.body when I typing text in textarea.
But I dont see values in:
<input type="text" ng-model="comment.file" ng-value="f | ngfDataUrl" ng-repeat="f in files">
But object files is not empty.
Input file is:
<input type="text" ng-model="comment.file[$index]" ng-value="f | ngfDataUrl" ng-repeat="f in files" class="ng-pristine ng-valid ng-scope ng-empty ng-touched" value="blob:http://bg.com/ec70ef5e-0971-4cb5-b7c0-6032413c4bee">
Related
How can one input be the same value as another input via angularjs? I know how to do this via jquery but not in angularjs. Here is my code:
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
<script type="text/javascript">
var peopleApp = angular.module('peopleApp', []);
peopleApp.controller('myController', function(){
$scope.input = {
'username': $scope.input.user_code
}
});
</script>
So basically what I want is the first input element to be the same value as the second input element
use ng-blur or ng-change
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-blur="input.username = input.user_code" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
The answer above works, but if you want it to update in real time, just use the same model:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.user_code" name="username" type="text" required>
When you change one of the two, the other will update as well. You can also use this as any other tag. For example, this will show what you type on the <p> tag:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<p> {{ input.user_code }} </p>
I have this form (shown after page loads with Angular filled in data):
<div ng-controller="ItemsController">
<form name="Items" class="form-horizontal ng-dirty ng-valid-parse ng-valid ng-valid-required ng-submitted" ng-submit="submit()" _lpchecked="1">
<input ng-model="item._token" name="_token" type="hidden" value="gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe" class="ng-pristine ng-untouched ng-valid">
<input ng-model="item.no_label" name="no_label" type="hidden" value="1" class="ng-pristine ng-untouched ng-valid">
<fieldset>
<legend>Add New Item</legend>
<div class="form-group">
<label class="col-md-2 control-label" for="sku">SKU</label>
<div class="col-md-3">
<input id="sku" name="sku" ng-model="item.sku" type="text" placeholder="Enter SKU" class="form-control input-md ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Name">Name</label>
<div class="col-md-5">
<input id="name" name="name" ng-model="item.name" type="text" placeholder="Optional name" class="form-control input-md ng-valid ng-dirty ng-valid-parse ng-touched">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="add"></label>
<div class="col-md-4">
<button id="add" name="add" class="btn btn-success">
<i class="fa fa-plus"></i> Add
</button>
<button id="cancel" name="cancel" class="btn btn-danger">Cancel</button>
</div>
</div>
</fieldset>
</form>
</div>
And this controller:
myApp.controller('ItemsController', ['$scope', '$http', function ($scope, $http) {
$scope.item = {};
$scope.submit = function () {
if ($scope.validate()) {
$http.post('/items/store', $scope.item)
.success(function (data) {
toastr['success']('Added ' + $scope.item.sku + ' to list.', 'Success!');
$scope.Items.$setPristine();
oTable.ajax.reload();
}).error(function (data) {
if ('error' in data)
toastr['error']('ERROR: ' + data['error'], 'Error!');
else
toastr['error'](JSON.stringify(data), 'Error!');
});
}
};
$scope.validate = function () {
return $.trim($scope.item.sku) != '';
};
}]);
Everytime I submit this form, the data in $scope.item is missing item._token and item.no_label.
Why and how do I correct this?
ng-model is used for two-way data binding. Since you are using hidden input elements, which can not be modified by or shown to users, there is no reason using ng-model. The less two-way binding, the better Perf would be.
So the best way to fix this issue is that add _token and no_label value to $scope.item in controller.
$scope.item = {
_token: 'gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe',
no_label: 1
};
If you must add these elements in View, use one-way binding in View
<input name="_token" type="hidden" value="{{:: item._token}}" class="ng-pristine ng-untouched ng-valid">
<input name="no_label" type="hidden" value="{{:: item.no_label}}" class="ng-pristine ng-untouched ng-valid">
Check this pr to know more about how Angular guys think about data binding on hidden elements.
Instead of using the value attribute try using ng-value:
<input ng-model="item._token" name="_token" type="hidden" ng-value="gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe" class="ng-pristine ng-untouched ng-valid">
<input ng-model="item.no_label" name="no_label" type="hidden" ng-value="1" class="ng-pristine ng-untouched ng-valid">
Another option is updating item like this:
$scope.item = {
_token: 'gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe',
no_label: 1
};
i have a form with two differently named ng-models. I need to pass both of them with the form. How would this work? I need to pass currentItem + currentItem.Customer I am having trouble with a PdfSharp controller and I want to see if this is the reason why the Customer Values are being passed back as Null.
controller
$scope.EmailPdf = function () {
var id = $scope.currentItem.JobId
$http.get('/api/Pdf/' + id).success(function () {
$scope.PrintPreviewModal();
});
}
form
<form ng-submit="submitJob()" enctype="multipart/form-data" name="myForm">
<fieldset>
<div class="col-xs-12">
<label>Number:</label>
<input ng-model="currentItem.JobNumber" type="text" name="JobNumber">
<label>Customer:</label>
<input type="text" ng-model="currentItem.Customer.CustomerName"
typeahead="customer.CustomerName for customer in customerArray | filter:$viewValue"
typeahead-on-select="selectEditCustomer($item)">
</div>
<input ng-model="currentItem.CustomerId" type="text" ng-hide="true"/>
<div class="inline-fields">
<label >Status:</label>
<selectng-model="currentItem.JobStatus">
<option value="" selected="selected">Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
<label>Address:</label>
<input ng-model="currentItem.Customer.CustomerAddress" type="text">
</div>
<div class="inline-fields">
<label>Name:</label>
<input ng-model="currentItem.JobName" type="text">
<label>City:</label>
<input ng-model="currentItem.Customer.CustomerCity" type="text">
<label>St:</label>
<inputng-model="currentItem.Customer.CustomerState" type="text">
<label>Zip:</label>
<input ng-model="currentItem.Customer.CustomerZipcode" type="text">
</div>
<div class="inline-fields">
<label>Address:</label>
<input ng-model="currentItem.JobAddress" type="text">
<label>Ph:</label>
<input ng-model="currentItem.Customer.CustomerPhoneNumber" type="text">
<label>Fax:</label>
<input disabled style="width: 105px"ng-model="currentItem.Customer.CustomerFaxNumber" type="text">
</div>
<input ng-click="EmailPdf(currentItem)" type="button" value="Email" />
Well it's a bit difficult to tell exactly what you are asking here, but it sounds like you mean that you need to pass more information than the ID into your get. So you can pass the entire currentItem with all it's content like this
$http.get('/api/Pdf/' + id,angular.toJson($scope.currentItem)).....
Is that what you are trying to do?
I would like to set invalid with angular when firstname is equals to lastname and change the color using styles to red.
http://jsbin.com/japir/2
function RegoController($scope) {
$scope.app = {
firstName: "Saroj"
};
$scope.$watch("app.lastName", function(newVal, oldVal) {
if (!!$scope.app.lastName && !!newVal)
if (angular.lowercase($scope.app.firstName) === angular.lowercase(newVal)) {
debugger;
$scope.form.inputLastName.$setValidity("sameName", false);
}
});
}
<body ng-app>
<div class="container" ng-controller="RegoController">
<div class="col-lg-4">
<form name="form">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input id="inputFirstName" class="form-control" type="text" ng-model="app.firstName" placeholder="Enter your firstname" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input id="inputLastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input id="inputEmail" class="form-control" type="email" ng-model="app.email" placeholder="Enter your email" required />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
{{app}}
</div>
</div>
</body>
The problem is that you are trying to select a form input that has no name; thus making it unable to find the field you are trying to invalidate. Here is a working example:
JSBIN: http://jsbin.com/yozanado/1/
Input field with name:
<input id="inputLastName" name="lastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
Javascript:
$scope.form.lastName.$setValidity("sameName", false);
AngularJS form validation relies on the name of the form and the name of the fields to find the validation models on scope.
For example, if your HTML is:
<form name="form">
<input name="firstName" ng-model="firstName" />
</form>
You will be able to access the validation $error property on scope using the name attributes:
$scope.form.firstName.$error.sameName
To fix the issues you're having, add a name attribute to your input fields.
JSBin Demo
I'm having a style problem with my modal.
Here's the code of my modal :
<script type="text/ng-template" id="contact">
<div class="modal-header">
<i class="fa fa-paper-plane"></i> Contact
<a ng-click="closeModal()" style="float: right;"><i class="fa fa-times text-danger"></i></a>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<input class="col-md-6" type="text" ng-model="contact.name" placeholder="{{ data.contact.name }}" required />
<input class="col-md-6" type="email" ng-model="contact.mail" placeholder="{{ data.contact.mail }}" required />
<input type="text" ng-model="contact.subject" placeholder="{{ data.contact.subject }}" required />
<textarea ng-model="contact.message" rows="5" placeholder="{{ data.contact.desc }}" required></textarea>
<form>
</div>
<div class="modal-footer">
The Footer Goes There
</div>
</script>
What am I doing wrong ?
EDIT :
I'm using Bootstrap 3.1.1 & UI-Bootstrap 0.11.0,
Add class="form-control" to your inputs.
<div class="modal-body">
<form class="form-horizontal" role="form">
<input class="form-control col-md-6" type="text" ng-model="contact.name" placeholder="{{ data.contact.name }}" required />
<input class="form-control col-md-6" type="email" ng-model="contact.mail" placeholder="{{ data.contact.mail }}" required />
<input class="form-control" type="text" ng-model="contact.subject" placeholder="{{ data.contact.subject }}" required />
<textarea class="form-control" ng-model=" contact.message" rows="5" placeholder="{{ data.contact.desc }}" required></textarea>
</form>
</div>