I have a very simplified bit of html like so:
<call-panel>
<form name="hotListForm" >
<twilio>
<input type="text" name="phoneOtherText" id="phoneOtherText" class="form-control" required="required" ng-model="phoneNumber" ng-pattern="validation" ng-trim="false"/>
<span class="error" ng-show="hotListForm.phoneOtherText.$error.pattern">Not a valid phone number</span>
</twilio>
</form>
</call-panel>
But this doesn't work. Is there a special way to do this when in a nested directive. I have verified pattern is available.
Screenshot of it definitely being in the form and of form structure:
It is not working probably because you have the id set to "phoneOtherText" as well, try changing the id and try
Related
Please think in angularjs way.
Actually my layout is different.
I have input fields inside form and also have input fields outside form, this is a special case in my product.
I know about form attribute in HTML5
But
In AngualrJS:
I want to achieve outside form input fields works as good as inside form input field works for validation purpose.
Is it possible? We can not remove the place of form tag.
If Yes please guide me.
<div ng-app="myApp" ng-controller="validateCtrl" >
<h6>Validation Example</h6>
<form id="frm" name="myForm" novalidate>
Inside form
<p>
<input type="submit" ng-disabled="myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
Outside form
<p>Email:<br>
<input form="frm" type="email" name="email" ng-model="email" required>
</p>
</div>
Plunker
Friends, I am new to angularjs please explain why name attribute required for angularjs validation
<form name="lform" novalidate>
<input type="text" name="userName" ng-model="userName" required novalidate/>
<span style="color:red" ng-show="lform.userName.$dirty && lform.userName.$invalid">
<span ng-show="lform.userName.$error.required">Username is required.</span>
</span>
<br/>
</form>
If I remove name="userName" code not working, please explain this.
Update: If I remove "ng-model" it is not working, but I can change "ngmodel='newName'" is working, please explain this reason also.
This is just how HTML form works, name describe the parameter that will be sent to the server.
Angular's approach is to extend HTML and its behaviour, instead of inventing the wheel. Angular encapsulates "form" (see ngForm directive) and extend it. Because name is the unique id of an input in a form, it is also the unique id of the input in ngForm's collection.
ng-model is another directive that bind the value of the input into a variable in the current scope, it doesn't have to hold the same value as name.
Let's take your example and change ng-model:
<form name="lform" novalidate>
<input type="text" name="userName" ng-model="object.name" required novalidate/>
<span style="color:red" ng-show="lform.userName.$dirty && lform.userName.$invalid">
<span ng-show="lform.userName.$error.required">Username is required.</span>
</span>
<br/>
</form>
The validation will work, but the variable that will be updated in your scope is "object.name".
To sum it up, lform.userName holds the metadata and object.name will hold the actual data.
The answer is in your code.
<span ng-show="lform.userName.$error.required">Username is required.</span>
Angular is using the input name to store the error related information.
lform – your form name
username – your input name
I have inputs in a web page without the form tag (useless to me).
How can I get their validity status inside the HTML ? This
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">
doesn't work.
I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.
<form name="myForm">
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myForm.myInput.$valid">
</form>
Should work.
If you're unable to use the form tag for any reason, you'll have to wire that up manually.
I am trying to submit the form on only successful validation.
validation is working for required but not working for ng-minlength
form input is invalid but form is still being submitted.
<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>
count: {{count}}<br />
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>
http://jsfiddle.net/pMMke/9/
what am I doing wrong.
I don't want to use submit button disable method.
This is what you are doing wrong: you are mixing two concepts, Angular validators and
HTML5 validators.
The required HTML5 validators, for instance, states that:
When present, it specifies that an input field must be filled out before submitting the form.
So, if you try to submit a form that has an input with this attribute, it will show a message explaining this to the user, and it will prevent the form from being sent. This is the behavior you want. Why isn't working for ng-minlength? Because ng-minlength is an Angular validator (you can tell because it begins with ng-), and it doesn't add any special behavior to the form. It simply set the input where it is located to invalid (and hence, the form), and let you decide what to do with it.
You have an option: you can use the pattern HTML5 validator, to specify the field requires at least 11 characters. It would like this:
<input type="text" pattern=".{11,}">
So when you submit a form containing this input, it will no be sent if the user has enter less than 11 characters.
But since we are it, and you are already using the pattern validator, you could use the regular expression in its full potential, and define something like:
<input type="text" pattern="07[0-9]{9}" />
Which will only admit values of 11 characters, that start by "07" and that contains only digits. I have modified your fiddle to show you how it would work: http://jsfiddle.net/helara/w35SQ/
I mistakenly used ngMaxlength="12" ngMinlength="6" instead of ng-minlength="6" ng-maxlength="12", it's working fine now.
Both ng-minlength & mg-maxlength works in AngularJS.
I've tested this in AngularJS version 1.3.
Make sure to use novalidate with <form> to disable browser's native validation.
This should work:
To enter mobile number
ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"
For minimum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"
For maximum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength"
This work for me guys
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^\d+$/">
<label class="mdl-textfield__label" for="cpf">CPF *</label>
</div>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>
I'm facing the same issue, and I think you can only disable the button or ignore the entered value by yourself. You can also check the $valid property in your controller and ignore the value... It is not so nice, but I found no other way.
I'm using AngularJS and have a form where I want the Submit button to be disabled if some fields are not filled in.
The standard way seems to be the following:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" ng-model="form.name" required>
<input type="submit" ng-disabled="myForm.name.$invalid">
</form>
http://jsfiddle.net/YMSRU/
However, if I omit the model from the input field the validation doesn't work and I don't need any models on my input fields (I submit my form using the ngUpload directive so it's actually sent to the form action in an iframe).
Is there any solution or should I add random models just to make the validation work? It seems like a bad work-around.
You could simply do the invalid check at the form level, then no need to define a model for each input:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" required>
<input type="submit" ng-disabled="myForm.$invalid">
</form>
You are missing your model at your test input tag : ng-model="form.name"