What is the difference between required and ng-required (form validation)?
AngularJS form elements look for the required attribute to perform validation functions. ng-required allows you to set the required attribute depending on a boolean test (for instance, only require field B - say, a student number - if the field A has a certain value - if you selected "student" as a choice)
As an example, <input required> and <input ng-required="true"> are essentially the same thing
If you are wondering why this is this way, (and not just make <input required="true"> or <input required="false">), it is due to the limitations of HTML - the required attribute has no associated value - its mere presence means (as per HTML standards) that the element is required - so angular needs a way to set/unset required value (required="false" would be invalid HTML)
I would like to make a addon for tiago's answer:
Suppose you're hiding element using ng-show and adding a required attribute on the same:
<div ng-show="false">
<input required name="something" ng-model="name"/>
</div>
will throw an error something like :
An invalid form control with name='' is not focusable
This is because you just cannot impose required validation on hidden elements. Using ng-required makes it easier to conditionally apply required validation which is just awesome!!
The HTML attribute required="required" is a statement telling the browser that this field is required in order for the form to be valid. (required="required" is the XHTML form, just using required is equivalent)
The Angular attribute ng-required="yourCondition" means 'isRequired(yourCondition)' and sets the HTML attribute dynamically for you depending on your condition.
Also note that the HTML version is confusing, it is not possible to write something conditional like required="true" or required="false", only the presence of the attribute matters (present means true) ! This is where Angular helps you out with ng-required.
Related
I am creating a AngularJS app to render forms dynamically from a generic for definition data structure. So the form details (including all validation rules, data types etc) are defined in a database and a single AngularController should "draw" the form.
For background - here is the rough structure of the defiintion:
Form
Sections
Fields
It works fine - but I have a problem when adding attributes to the <input> element on the form based on the definition. So for example, lets say field1requires a min and max length validation, but field 2 does not. This is achieved by adding the ng-minlength and ng-maxlength attributes to the input element for field1 and NOT adding these to the input element for field2.
Some googling sugested that the recently removed ng-attr directive might have been a sollution - but since its removed, I am stuck?
<ng-form name="frmTSFApp">
<uib-tabset>
<uib-tab ng-repeat="aSection in tsf3fd.section track by aSection.ukey"
index="aSection.display_order"
heading="{{aSection.display_label}}">
<ng-form name="frmSection{{aSection.display_order}}">
<div ng-repeat="aField in aSection.fields track by aField.ukey"
class="form-group"
ng-class="getFormClass(frmSection{{aSection.display_order}}[aField.data_name],aField)">
<label class="control-label">{{aField.field_label}}</label>
<input ng-required="{{aField.require_kind == 'R'}}"
type="text"
class="form-control"
ng-model="tsf3fd.model[aField.data_name]"
name="{{aField.data_name}}" />
</ng-form>
</uib-tab>
</uib-tabset>
</ng-form>
The above snippet is what we use to render the form - so the ng-required attribute works nicely, since its always there and its value can be resolved from the expression. For each field we "know" all the validations we need to add (ng-minlength or ng-pattern etc etc) but not sure how to do this?
In psuedo code I would like something like this "inside: the input element:
if (aField.validations.minmax)
{
ng-minlength = "{aField.validations.minmax.min}"
ng-maxlength = "{aField.validations.minmax.max}"
}
Hope my explanation makes sense.
I am starting to doubt my approach - it seems a simpler approach is to render the "literal" form markup externally through something like XSLT from the deffinition data. We have done this and it works fine, but I thought working directly from the data would be so "cool" and would simplify the process.
Anyway - any help would be appreciated.
You can just use:
<input
ng-required="{{aField.require_kind == 'R'}}"
ng-minlength="{{aField.validations.minmax ? aField.validations.minmax.min : '' }}"
ng-maxlength="{{aField.validations.minmax ? aField.validations.minmax.max : '' }}"
type="text"
class="form-control"
ng-model="tsf3fd.model[aField.data_name]"
name="{{aField.data_name}}" />
Setting ng-minlength or ng-maxlength to empty string has the same effect as not setting them.
I'm thinking of a good way to implement ng-required.
Let's say I have a bunch of inputs with ng-required in my app.
<input type="text" id="one" />
<input type="date" id="two" />
<input type="radio" id="three" />
<input type="checkbox" id="four" />
I would like to do something in a controller, where I could pass an array of required fields. I'm thinking that if I made an array of elements such as:
var myEl = angular.element( document.querySelector( '#some-id' ) );
and some how set the required property that way.
I write a directive which would decide from an array if the field is required, if it does not exist in the array, it's not required if it does, it's required.
Ultimately, I would like to have an array that allows passing of fields in such a way:
var reqArray = ('#id', ('#id1' || 'id2')) etc.
Works the same as conditional logic operators:
#id is required
#id1 || #id2 is required, but not both.
Not sure where to begin, or if it's feasible in Angular.
This would make it easier to modify required fields in large applications without having to modify the actual html.
It can be done, but angular already provides its own ways to validate forms. Some brief details:
The form tag must have a novalidate attribute in order to prevent HTML5 validation. <form name="myForm" novalidate>
With that, now angular can take charge of the validation by adding a "required" attribute to your inputs <input ng-model="myModel" type="text" required>
By this point, angular has taken control of your validation, it can also validate other HTML5 attributes like pattern. <input pattern="[0-9][A-Z]{3}" type="text" title="Single digit followed by three uppercase letters."/>
I suggest you take look at this official guide (also take a look at the directives guide on that same site, I wanted to link it but I don't yet have the rep).
That being said, what you are trying to accomplish is also possible, but rather redundant since you would have to add an attribute to your inputs anyway (the directive, and angular is able to validate already) and also require ngModel in the directive.
I made this plunkr to show you how to do it, but take notice of the extra work needed in order to validate something that angular already does natively, I'd leave this kind of work for expanding on validations, like comparing items or models.
Also, querying a selector directly like in your suggestion is not considered "the angular way". A better way would be to add the directive to your form element and access the element through the 'element' parameter in the directive.
Hope this helps.
I have the following code
<div class="form-group" show-errors ng-show="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'">
<label class="control-label">Social Security Number</label>
<input type="text" class="form-control" ng-model="contact.SSN" ui-mask="999-99-9999" name="SSN" maxlength="50" required />
</div>
I would have thought that Angular would have made sure that the hidden field was no longer required however that is not the case. although the user can't see it it's clearly still stopping the form from being submitted because I see the following error in the console.
An invalid form control with name='SSN' is not focusable.
So - the question is how do I handle this? If it's displayed I want it to be required if not obviously we can't try and force the user to fill out the values.
2 solutions:
use ng-if rather than ng-show to remove the input from the form rather than hiding it
instead of required, use ng-required="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'" to make it required only when the condition showing the field is true. You should put that complex condition in a scope function though, to avoid duplicating it.
Note however that even if the form is invalid, it can still be submitted, unless you're explicitely preventing it by disabling its submit button when the form is invalid. I don't think the error you're seeing has anything to do with the form being invalid.
Also note that the second solution will only deal with the field being required. If the value inside the field is too long or doesn't match with the mask, the field will stay invalid. So you should probably use the first solution.
I am new with the AngularJs. Can anyone say the difference between ng-model and data-ng-model?
With ng-model
First Name : <input type="text" ng-model="fname" id="fname">
Second Name : <input type="text" ng-model="lname" id="lname">
With data-ng-model
First Name : <input type="text" data-ng-model="fname" id="fname">
Second Name : <input type="text" data-ng-model="lname" id="lname">
while both ng-model and data-ng-model would work, HTML5 expects any custom attribute to be prefixed by data-.
<!-- not HTML5 valid -->
<input type="text" ng-model="name">
<!-- HTML5 valid -->
<input type="text" data-ng-model="name">
They are the same. Angular strips the data- part from the attribute. From the docs:
Angular normalizes an element's tag and attribute name to determine which elements match which directives... The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
There is no difference between ng-model and data-ng-model if you see in terms of AngularJs.
Actually, 'data' used as prefix to validate HTML5 validation. So, it is good practice to use data-ng-model, however, you can use ng-model as well. There is no problem in that also.
Both have the same meaning and both have the same output:
With ng-model
First Name : <input type="text" ng-model="fname" id="fname">
Second Name : <input type="text" ng-model="lname" id="lname">
With data-ng-model
First Name : <input type="text" data-ng-model="fname" id="fname">
Second Name : <input type="text" data-ng-model="lname" id="lname">
Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them.
sylewester's answer is correct and can be read in the AngularJS Directive Documentation found at https://docs.angularjs.org/guide/directive
(this helped me understand sylwester's answer, so i figured it might help others too.)
sylewester's answer is correct and can be read in the AngularJS Directive Documentation found at https://docs.angularjs.org/guide/directive. Below is an excerpt from that page.
AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
For example, the following forms are all equivalent and match the ngBind directive:
(this helped me understand sylwester's answer, so i figured it might help others too.)
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