I am trying to extend (my real example is very similar) angular-xeditable - Editable row - example described here:
http://vitalets.github.io/angular-xeditable/#editable-row
or its jsFiddle link here:
http://jsfiddle.net/NfPcH/93/
so that I have one additional column for uploading file for every row/item. It is fine if it can be just input element of type file, but I am opened for other solutions. Usually, my column looks like this:
<td>
<span editable-text="template.description" e-name="description" e-form="rowform" e-required>
{{ template.description || 'empty' }}
</span>
</td>
But, now I want to add my custom column, and I tried input element with or without all metioned attributes here:
<td>
<input id="file"
accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
ng-show="rowform.$visible"
class="btn btn-default"
name="file"
type="file"
e-name="file"
e-form="rowform"
value="{{ user.file || 'empty' }}" />
</td>
In any case, I cannot get - file - value in my angular controller after trying to save row, when this code is executed:
$scope.saveUser = function (data, id) {
//$scope.user not updated yet
angular.extend(data, { id: id });
angular.extend(data, { file: file });
return $http.post('/saveUser', data);
};
My - data - object is here with all other properties like - description - but not with - file - property!
Of course, I extended form onbeforesave event with:
...
form editable-form name="rowform" onbeforesave="saveTemplate($data, user.id, user.file)"
...
Any suggestion?
Thanks,
Vedran
I'm stuck with this.
When I thought that everything is fine because I got file object in my angular model by using solution with creation of custom directive mentioned here:
ng-model for <input type="file"/>
... then new issue started to bother me.
I can't get this file object mapped during binding process to HttpPostedFileBase parameter of MVC controller.
I tried everything, like excluding property and adding separate parameter to my MVC controller, or creating custom MVC model binder but examples I saw used ModelBinderResult class which I couldn't find under MVC 5 classes in any namespace.
This File object is here for sure, but I couldn't make it work. I know that object is not empty or null because if I specify type of controller's input parameter => object, then it is not null.
Please, any help will be more than welcome!
Vedran
Related
I have an AngularJS project that uses Angular Bootstrap and I use the Angular-xeditable library for some edit-in-place fields in a table.
One of the inputs I have is a "select" input, i.e. a drop-down list that allows a user to select one option. (editable-select in xeditable).
I am trying to make this input mandatory when saving the form, but I cannot find a way to do this. Similar to all the x-editable controls I would expect that I can simply add an e- prefix to the standard angular directive to apply that directive to the xeditable control, that is, I should be able to add e-ng-required="true" to my control to make it mandatory. Yet this does not work. I do not get any errors when I add this, but it doesn't "do" anything. I can still save my form without selecting an item.
The following is a code sample of what I'm trying to do:
<form editable-form name="tableform" onaftersave="saveSubmissions()" oncancel="cancel()">
<table>
<!--Define table headings and columns...-->
<!--Define an ng-repeat to display each row-->
<tr ng-repeat="currentRow in dataRows">
<!--Add some columns for the row-->
<!--Add the select/drop-down column pertaining to this question-->
<td>
<span editable-select="currentRow.vendorID" e-ng-options="x.vendorId as x.name for x in vendors" e-form="tableform" e-ng-required="true">
{{showVendor(currentRow)}}
</span>
</td>
<!--Add some more columns for each row-->
</tr>
</table>
</form>
Even though I've set e-ng-required="true" on the element, it does nothing. How can I make the selection of an item mandatory using xeditable? I have searched for examples but couldn't find anything helpful.
Unfortunately required doesn't work with form validators as stated in the following links
Required field validation is not working
Validation field form using tag "form" with angular-xeditable
You have to manually check and set the validity of input onbeforesave and set validity of input element.
html
<span editable-select="currentRow.vendorID" e-ng-options="x.vendorId as x.name for x in vendors" e-form="tableform" e-name="vendor" onbeforesave="checkValidity()">
{{showVendor(currentRow)}}
</span>
js
$scope.checkValidity = function(){
if(valid){
$scope.tableform.$setValidity("vendor", true);
}
else{
$scope.tableform.$setValidity("vendor", false);
}
}
I'm writing a few components for a form, these will be included (via Grails <g:include> tags) in multiple places (a registration page, and an account page). The way Angular works, I have to specify the form name in order to get a reference to a particular field. For example:
<form name="myForm">
<input ng-model="username"/>
{{myForm.username}} -- right here
</form>
In the example above, I must use myForm in order to access username. This will not work when using the same field in multiple forms, as the form name will change.
Is there a way to access the field relatively, or maybe figure out the enclosing form name and inject that?
You shouldn't have to reference your form's name. Just bind it to a property on your controller's $scope and you should be good to go. Doing it this way, you won't have to care what your form name is, only that the controller has the property you need.
<form ng-controller="yourController">
<input ng-model="username"/>
{{ username }}
</form>
angular.controller('yourController', ['$scope', function($scope){
$scope.username = 'keanu reeves';
}]);
Here's a code pen.
You have to use some sort of dynamic form name code. e.g.
<div ng-repeat="myForm in forms">
<form name="myForm{{$index}}">
<input ng-model="myForm.username"/>
{{myForm.username}} -- right here
</form>
</div>
Although it's difficult to solve your exact problem without example code. Create a plunker or codepen that we can analyze.
i'm learning angular, so please be gentle ;)
I have a table that is populated with some data. And i would like to add filtering (not angular filter, but data filter) on each column.
The idea for me is to add a text box at the top of each column in the header. Then use those textbox values to create the Filters array in my service when it called the api to get the data.
I currently have:
<tr>
<th ng-repeat="column in report.Columns" ng-show="column.IsVisible">
<span class="sort" ng-click="updateSortOrder($index)" ng-class="{'sort-asc': predicate == $index && !reverse, 'sort-desc':predicate == $index && reverse}">{{ column.DisplayName }}</span>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-filter fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Search" ng-model="">
</div>
</th>
</tr>
what i'm stuck on, is how to assign the text boxes to the ng-model, naming them dynamically based on the column that they stand in.
I thought about using ng-model="column.ColumnName" - but wont that bind the text boxes to the report.Columns.ColumnName ? i dont want to edit that, i want to create a new var on the scope for each one.
Something like $scope.Filters.-ColumnName-.
And then i would like to loop through each ColumnName on $scope.Filters and use it's value in my filters array on my service call.
I hope this is making sense. If I'm heading down the wrong route to achieve this, please feel free to point me in the right direction, as i said, i've just started learning Angular.
Thanks in advance
This is not angular related specifically it is more of a javascript issue.
For variable property names you use [] object notation
<input ng-model="filters[column]"
In controller :
$scope.filters ={}
If properties aren't already created in the scope object, ng-model will create them automatically when there is any user input
I wonder if anyone can help. On the surface of it, my question title may sound kind of stupid! I'm trying to use angularjs form validation in a non-angularjs application! Let me try to explain ...
We have a 'traditional' web app. Its not an SPA. The backend is java, and the java app server manages the session and the data within. Each page is a full http request/response. (There are a small number of ajax request/responses, but these are to add some bling to the page, rather than it's core functionality). In this respect, the architecture of the app is very traditional/old-skool, in that the server-side java code is responsible for generating the markup and populating form field values from it's version of the model data held in it's session store. (I think this is the crux of the problem)
The app is predominantly a HTML form based application, and to enhance the UX we have written some javascript field validators based around jQuery. For a number of reasons these have started to get a bit out of control, and we are exploring alternative options.
A simple google search finds countless jQuery plug ins for form validation. We are looking at these, but random jQuery plug ins are not our favoured approach (we tend to steer clear of 'somebloke.com' plug ins because we can't guarantee how well they're written, browser compatibility, future maintenance, how well they work with other plug ins etc - we've had our fingers burnt with this kind of thing before)
So we are looking at other approaches, and are currently exploring the use of angularjs.
Being able to 'gently introduce' angularjs into our architecture has some advantages. It's from a stable best-of-breed organisation (ie. it's not 'somebloke.com') so is well supported and maintained. It encourages us to write our js in a very modular & testable manner (our current rats nest of jQuery plugins, callbacks etc is far from that!). angularjs form validation is based around html5 standards and is declarative and semantic. It gives us a way forward for migrating our other jQuery based code to something better (angularjs directives). And overall, if we can layer angularjs into our current app, it gives us a good foundation for converting the app to a modern SPA at some point in the future.
Rewriting the entire app as an angularjs (or any other mv* framework) SPA at this point in time is not an option, so as mentioned above, we are looking at introducing small bits of functionality at a time; and today's challenge is form validation.
So, that's the background.
I've stripped out our current js client side validation, and our server-side java code is generating markup like this:
<form method="POST" action="/renew">
<input name="firstname" type="text" value="alf" />
<input name="surname" type="text" value="garnet" />
<input name="age" type="number" value="88" />
<input type="submit" />
</form>
(where the values for the input fields have been populated server-side from the model held by the server)
I've added the angularjs library to the page, and have got form validation working as follows:
<form method="POST" action="/renew" novalidate name="renewForm"
ng-controller="yourDetails" ng-submit="submitForm(renewForm, $event)">
<input name="firstname" type="text" value="alf" required ng-model="firstname"/>
<input name="surname" type="text" value="garnet" required ng-model="surname"/>
<input name="age" type="number" value="88" required ng-model="age"/>
<input type="submit" />
</form>
app.controller('yourDetails', function($scope) {
$scope.submitForm = function(form, $event) {
if (!form.$valid) {
$event.preventDefault();
return false;
}
};
});
This is a reasonable starting point. Broadly speaking it works in that angularjs is handling the form validation and submission. The submitForm method is executed, and if the form is not valid then the if block is entered and the form submission is cancelled. From here I can see it would be easy to add in the field error messages etc using ng-show etc.
The problem however is the use of ng-model on each html field. As I understand it I need to use this so that angularjs binds the field to the form, and can therefore track each fields valid status.
However, ng-model also appears to setup the 2-way data binding and sets the value of the field to it's version of the model data ... which is empty. For example:
Our server-side template might contain this:
<input th:field="*{firstname}" type="text" required ng-model="firstname"/>
Which might generate this markup:
<input name="firstname" value="alf" type="text" required ng-model="firstname"/>
The markup that gets served to the client includes value="alf"
But then angularjs steps in and sets up 2-way binding for the field. Because we don't have a firstname property in the angularjs scope, it initialises one with a blank value, and sets that blank value in the DOM of the field.
This results in the page being rendered by the browser with blank values in the fields, even though server-side we have values in the model, and the server has correctly generated the markup etc.
So, I think I understand the core problem and why it's happening. My question is, can I do angularjs form validation without the ng-model attribute on each field, or is there a version of the ng-model directive that only does 1-way binding - specifically DOM -> model
Any help would be very much appreciated;
Thanks
Nathan
When generating your form at server side, you can initialize your model with ng-init:
<input ng-init="firstname='alf'" th:field="*{firstname}" type="text" required ng-model="firstname" />
OK, #Alexandre's answer was almost right, and it was his answer that pointed me in the direction of my final solution (so he should get the credit for this really :) )
ng-init does work as #Alexandre has suggested. The reason I couldn't get it to work was that I was trying to use it on a number field.
The following works because the value being set on the model with ngInit and the html input type are both text/string:
<input ng-init="firstname='alf'" th:field="*{firstname}" type="text" required ng-model="firstname" />
I was trying it on the age field as follows:
<input ng-init="age='88'" th:field="*{age}" type="number" required ng-model="age" />
This does not work because the age property was being set on the model as a string, but the html input type is a number. The following does work:
<input ng-init="age=88" th:field="*{age}" type="number" required ng-model="age" />
This led me to realise that the value being set on the angular model needs to match the data type of the html input type (certainly true of chrome, not sure about other browsers) (ie. string properties in the model - even if they are parse-able as numbers - cannot be used in a html number field with ngModel)
With this in mind, I decided there were 2 options. I could either do it server-side in the code that generates the markup:
<input ng-init="age=(some-potentially-complex-logic-to-workout-whether-its-a-string-or-number)" th:field="*{age}" type="number" required ng-model="age" />
Or I could do it client-side with a custom directive. In the end I went with a custom directive because a) it meant I could have a go at writing a directive (all part of the learning :)) and b) I realised there might be other cases that need special consideration which might make doing it server-side even more complex (ie. select fields don't have a value, they have a selected index of which you need to get it's value; radio buttons all have a value but you only want to set the value of the checked radio)
Here's what I came up with:
angularApp.directive('lvInitializeValueOnScope', function() {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var propertyName = attrs.name,
propertyValue = attrs.value,
elementName = element.get(0).tagName.toLowerCase(),
fieldType = ( elementName === 'input' ? attrs.type.toLowerCase() : elementName ),
// set expression to assume propertyValue is a string value
expression = propertyName + '=\'' + ( !!propertyValue ? propertyValue : '' ) + '\'';
// if the input field type is number and propertyValue is parse-able as a number
if (fieldType === 'number' && !isNaN(parseFloat(propertyValue))) {
// set expression without quotes surrounding propertyValue
expression = propertyName + '=' + propertyValue;
}
// if the field is a html select element
if (fieldType === 'select') {
// propertyValue will be blank because select elements don't have a value attribute
// instead, we need to use the value of the child option element that is selected
propertyValue = $(element.html()).filter(":selected").val();
// set expression to assume propertyValue is a string value
expression = propertyName + '=\'' + ( !!propertyValue ? propertyValue : '' ) + '\'';
}
// if the input field type is a radio button but its not checked (selected)
if (fieldType === 'radio' && !element.is(':checked')) {
// we need to reset the expression so a blank value is used
// doing this means that only the checked/selected radio button values get set on the model
expression = propertyName + '=\'\'';
}
// evaluate the expression, just as angular's ngInit does
scope.$eval(expression);
}
};
});
(it looks more complex than it actual is because I've left the comments in - strip those out and there's really nothing to it)
To use it, each field that I am using ng-model on, I also need to use the attribute data-lv-initialize-value-on-scope. You don't need to pass any value on the attribute, the directive gets everything it needs from the element and attr parameters
So far it caters with text, number, radio and select fields. The pages I'm working on don't have any checkboxes, but as and when I come across those I dare say I'll need to add some code for those.
It works, and I think I prefer this to using ng-init with a load of server-side to determine whether to set a value, what its data type should be, etc
The only downside I can see at the moment is that processing a radio button set might be inefficient. IE. if you have 10 radio buttons, each marked up with ng-model and data-lv-initialize-value-on-scope; all 10 will run the data-lv-initialize-value-on-scope directive and set a value on the scope. At least 9 of the iterations will set a blank value on the scope, and at most only 1 will set the actual value on the scope.
Hey-ho, it seems to work for now :). Hope this helps someone in the future
Nathan
I am facing problem in populating default values for dynamically generated form fields in using angular. So, I have a login form that generates itself based on the attribtes returned by aREST interface. Therefore for my html page, I just have :
<li ng-repeat="element in elements">
<label>UserName</label>
<input type="{{element.inputType}}" ng-model="{{element.fieldName[element]}}" required="required"/>
The default values are returned in an attribute called placehoder in elements object. following tag gives an idea of the task that I am trying to achieve
<input type="{{element.inputType}}" ng-model="{{element.fieldName[element]}}" required="required" placeholder="{{element.placeholder}}"/>
Finally, when the user clicks submit , I need to post the default value of text field if it has not been changed.
Any help would be highly appreciated.
Thanks
If you can add/use a library like underscorejs or lodash, then you can use their _.defaults() :
var object = { 'name': 'barney' };
_.defaults(object, { 'name': 'fred', 'employer': 'slate' });
// → { 'name': 'barney', 'employer': 'slate' }
with angular only, you could add a directive to your form, that watches 'submit' and sets the default values for you.
Thanks for replying #nilsK, I am very new to javascript frameworks and Angular is the first one that I am having my hand on.
So in my R&D with it , I solved my issue by adding the two arrays of values i.e. FieldName and Placeholder to the scope object that I use to post data to my backend. I assign values to these arrays from the objects(placeholder and fieldName) that recieve from REST service as:
$scope.user={};
$scope.user.FieldNames=[];
$scope.user.FieldValues=[];
angular.forEach($scope.elements,function(value,index){
$scope.user.fieldValues[index] = $scope.elements[index].placeholder;
$scope.user.fieldNames[index] = $scope.elements[index].fieldName;
})
and on the html form, I bind ng-model to the scope array of values that I want to display as defaults in text field.
<input type="{{element.inputType}}" ng-model="user.fieldValues[$index]" required="required" />
Therefore, the default values are posted if user does not change them and if there is a change, updated values are posted.
Any suggestions to improve this solution are most welcome.