I would like to use Angular Material library in my project for showing the web page in Material design. I'm having input fields directly in a div, instead of having inside a form . How to properly do error validations now ?
Because the examples given on the documentation uses, form tag, which uses form name for showing ng-messages. How to achieve without form ?
You may use the ng-form angular directive (see docs here) to group anything, even outside a html form. Then, you can take advantage from angular FormController.
<div class="form-group" ng-form name="myForm">
<input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
<span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>
Example Plunker
Hope it helps
Related
What I want:
<input class="form-control" type="number" spinner ng-model="$scope.someNumber"/>
<!-- notice the `spinner` directive -->
What I have:
<input class="form-control" type="number" ng-model="$scope.someNumber"/>
Are there directives for better number spinners?
I've tried searching Google, but I'm not finding anything (spinner is also used to refer to a loading image, so perhaps I'm using the wrong terminology).
I created a directive special for you:
You can customize it as you want
<number-spin data-ng-model="vm.testNumber"></number-spin>
Here the jsfiddle
P.S. I added directive to npmjs here the link,
also github and demos
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 trying to use the 720Kb datepicker.
https://github.com/720kb/angular-datepicker
While using the simple example :
<datepicker>
<input ng-model="date" type="text"/>
</datepicker>
I'm getting the blow error:
angular.js:11655 Error: [$compile:multidir] Multiple directives
[datepicker, datepicker] asking for new/isolated scope on:
http://errors.angularjs.org/1.3.15/$compile/multidir?p0=datepicker&p1=datep…epicker%20class%3D%22datepicker%22%20date-format%3D%22dd%2FMM%2Fyyyy%22%3E
at angular.js:63
I noticed that if I'm changing the name of the directive in the src file for example to datepickercust the above example will work (with changing the tags).
<datepickercust >
<input ng-model="date" type="text"/>
</datepickercust>
Also , if I'm trying the same example by changing the 'datepicker' tags to 'div' tags , and adding class='datepicker' it works fine.
<div class="datepicker">
<input ng-model="date" type="text"/>
</div>
I just can't understand what's going on here... why the original example not working ?
Thanks in advance.
Check if there are two datepicker directives with the same name and do check what formation they allow like tag, element or attribute etc.
Issue found.
Looks like UI Bootstrap still contain 'datepicker' directive which is deprecated and causing this issue .
Now need to see how I can work with both .
Thanks all.
I am using angular-unsaved Changes directive as well as the angular built in form controller to detect if a form is $dirty.
I have a form on a specific page that even though I edit elements, the form never registers as dirty. I have gone so far as to strip everything and leave only:
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" id="thematiff" class="form-control" >
</form>
The formis never $dirty even when I change the value of the input. Any ideas what the problem could be causing the changes to input not to be detected? Is it that there should be an angular input equivalent tag instead of a plain old "input"?
What could be disabling the detection?
Ng-model is missing on your input field.
Validations and all form enhancements are provided by utilizing ng-model directive (and its controller). So add ng-model and everything is Ok.
See: http://jsbin.com/podepo/edit?html,output
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" ng-model="whatever" >
<pre>{{WHAT|json}}</pre>
</form>
My current code looks like this:
<form name="home.forms.modal">
...
<input ng-model="home.modal.data.text"></input>
<input ng-class="{error: home.forms.modal.name.$error}"
ng-model="home.modal.data.name"
name="name"
ng-minlength="5"
ng-required="true" />
...
</form>
<button ng-disabled="home.forms.modal.$invalid"
ng-click="home.modalSubmit(home.modal.data)">Submit</button>
I noticed there have been recent changes with messages for forms. What I would like to know is there anything at all in AngularJS that requires me to use the form element. If so then how could I change the above code so it would work with just a DIV ?
You can use the ng-form attribute on any element
<div ng-form name="home.forms.modal">
...
<input ng-model="home.modal.data.text"></input>
...
</div>
<button ng-click="home.modalSubmit(home.modal.data)">Submit</button>
validation on the client is way to hell, you should get the validation errors by server in .error callback of $http , and show them to client.
You may need to use forms with such directives, like ui-mask, to get the right value.
Using a form tag is syntactically correct, and some browsers (IE) do not display things correctly when you try to put form elements (input/button/textarea) into a page without them being surrounded by form tags.