Angularjs ngMessages ng-messages={multiple .$error}? - angularjs

I'm new to angularjs and I was just wondering about what ngMessage 'ng-messages' attribute can do.
I'm trying to display one ngMessage for multiple input[type=text] elements. for example:
<input type="text" id="name1" ng-model="person.name1" />
<input type="text" id="name2" ng-model="person.name2" />
<input type="text" id="name3" ng-model="person.name3" />
<input type="text" id="name4" ng-model="person.name4" />
<div id="error"
ng-messages="person.name1.$error ||
person.name2.$error ||
person.name3.$error ||
person.name4.$error"
ng-show="person.name1.$touched ||
person.name2.$touched ||
person.name3.$touched ||
person.name4.$touched"
ng-include="errorMsg.html"
/>
One validation message will display for all 4 input[type=text] attribute.

Try To use it it in the below manner:-
<form name="Form_Name">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>

The best solution I have come across so far is to group the fields you want with data-ng-form='subform' name='subform' and then for the messages element: data-ng-messages='subform.$error'

Related

How to disable a keyboard input after maxlength exceeds?

">
<ion-content>
<h3 class="style3"><strong>Message</strong></h3>
<form name="form1">
<div class="list">
<label class="item item-input" >
<input type="text" placeholder="Enter Number"ng-blur='SendInvit()' ng-model="message.name" name="phone" ng-required="true" />
<span class="error-message" ng-show="form1.phone.$dirty&&form1.phone.$invalid"> </span>
</label>
<input type="text" rows="4" cols="" placeholder="Write Your Message"
class="area" name="phone" ng-model="message.description" ng-maxlength=
"{{maxLength}}" ng-change="updateBody();" ng-required="true">
<span class="error-message" ng-show="form1.phone.$dirty &&form1.phone.$invalid"></span>
<div id="characters">
<span>Characters left: {{maxLength - message.description.length}}</span>
Send
Cancel
Below is the plunker of my work.Please help me with the code
http://plnkr.co/edit/NDGeMcqzpbIqwd8sr5jM
Used ng-disabled when the form is invalid with ng-maxlength. Set the maxlength from your controller.
Max-length:
ng-maxlength="maxlength"
Ng-disabled
ng-disabled="form1.phone.$invalid"
Here is a working example.
https://plnkr.co/edit/FC4vXw1311pnMee8d2Lz?p=preview
if you want simple solution use maxlength="10"!
Good luck.

How to disable submit button untill all the fields are filled in a form?

I have a form with a set of fields. My problem is, submit button is disabled initially but the moment any one of the field goes valid or non-empty button is getting enabled. Here is my source code:
<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>
<fieldset class="group">
<div class="field-group">
<label class="label">Product Name</label>
<input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
<p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
<div class="error"></div>
<span class="result_product" style="color: #880000"></span>
</div>
<div class="field-group">
<input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
<p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
<label class="label">Who are end users</label>
<div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
</div>
<div class="field-group">
<label for="licenseKey">What Problem Are They Facing Today</label>
<textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
<p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
<div class="description">Spend So much in .....</div>
</div>
<div class="field-group">
<label class="label">What kind of product is this</label>
<input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
<p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
<div class="description">[Software, MobileApp, JIRA-Plugin]</div>
</div>
<div class="field-group">
<label for="d-lname">How do you plan to solve the problem</label>
<input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
<p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
<div class="error"></div>
<div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
</div>
<div class="field-group">
<label for="d-lname">Who are your competitors</label>
<input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
<p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
<div class="error"></div>
<div class="description">Traditional Commuting Solution</div>
</div>
<div class="field-group">
<label for="d-lname">How do you differntiate from your competitors</label>
<input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
<p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
<div class="error"></div>
<div class="description">[Automated, Secure]</div>
</div>
</fieldset>
<div class="buttons-container">
<div class="buttons">
<button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
<button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
</div>
</div>
</form>
How can I make sure that submit button is disabled untill all the fields are filled.
I tried almost all the available solutions like make all the fields required, make the submit button as ./. But nothing seems to be working.
You are almost doing it right. To use angular's form validation, you have to use the angular directives for that. For example, use the ng-required instead of the normal required (though it will work, but you should use ng-required for best practices):
<form name="newDiscoveryForm">
<input type="text" name="someName"
ng-model="someModel"
ng-required="true" /> <!-- use ng-required -->
<!-- other inputs -->
<!-- $invalid will evaluate to true if the `ng-required` are not valid -->
<button type="submit"
ng-disabled="newDiscoveryForm.$invalid">
Submit!
</button>
</form>
See this JSFIDDLE

ng-disabled is not working

This might be a silly question. But I just started experimenting with AngularJS. Can someone point out what I'm doing wrong in validation. The button is not disabled even when the fields are invalid.
What's the difference between
ng-disabled="myForm.$invalid" and
ng-disabled="myForm.cuisine.$invalid || myForm.title.$invalid || myForm.description.$invalid || myForm.cost.$invalid"
I think using myForm.$invalid is a cleaner way of disabling the button. Any tips?
<form name="myForm">
<div class="form-group">
<select ng-required="true" name="cuisine" ng-model="model.food.cuisine" class="form-control" type="text">
<option ng-repeat="c in model.cuisines" value="{{c}}">{{c}}</option>
</select>
<p ng-show="myForm.cuisine.$invalid && myForm.cuisine.$touched">
Please select cuisine type.</p>
</div>
<div class="form-group">
<input ng-required="true" name="title" ng-minlength="4" ng-maxlength="25" ng-model="model.food.title"
type="text" class="form-control">
<p ng-show="myForm.title.$invalid && myForm.title.$touched">Please pick a valid title with atleast 4
characters.</p>
</div>
<div class="form-group">
<textarea ng-required="true" name="description" ng-minlength="10" ng-maxlength="255"
ng-model="model.food.description" type="text" class="form-control"></textarea>
<p ng-show="myForm.description.$valid && myForm.description.$touched">Please describe your food with 10 - 255
characters.</p>
</div>
<div class="form-group">
<input name="cost" ng-pattern="/0-9/" ng-required="true" min="1" ng-model="model.food.cost" type="number"
class="form-control" placeholder="Cost">
<p ng-show="myForm.cost.$error.pattern">Please enter a valid number</p>
<p ng-show="myForm.cost.$invalid && myForm.cost.$touched">Please enter cost of food item.</p>
</div>
<div class="form-group">
<button ng-disabled="myForm.$invalid" class="btn btn-success btn-block">Add Food</button>
</div>
</form>
Apparently, validations don't work if the form element is inside the body of a table.
It works fine if I moved the form tag outside the table.
Thanks everyone.

AngularJS validation message is not displayed when the field is invalid

I'm using angularJs validation in my html form. I'm using the required validation on an input, and when I erase the value there the textbox gets highlighed in red and trying to submit the pops-out the error 'Please fill out this field' But my custom error message is not displayed. Following is the code.
<form id="settingsForm" ng-submit="vm.saveSettings()" class="form">
<td style="width:30%">
<input class="userInput" name="locationName" style="width:80%" type="text" maxlength="50" data-ng-model="vm.location.locationName" required />
<label class="validationErrorText" data-ng-show="locationSettingsForm.locationName.$error.required">Location Name Required</label>
</td>
</form>
Any idea why this happens? Attached is a screenshot of how its displayed when the field is not filled.
I have created a plunker which will help you.
http://plnkr.co/edit/GVAdjcjcYczmcmzoCqoF
<form role="form" name="signUpForm" class="form-horizontal">
<div class="form-group">
<label for="url" class="col-sm-4 control-label">URL</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="url" id="url" placeholder="Enter last name"
ng-model="user.lastName" required="true" ng-pattern="/(https?:\/\/)(www)?[A-Za-z0-9.\-#_~]+\.[A-Za-z]{2,}(:[0-9]{2,5})?(\/[A-Za-z0-9\/_\-.~?&=]*)*/">
<span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.required">
<small class="text-danger">Please enter valid URL.</small>
</span>
<span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.pattern">
<small class="text-danger">URL should have 2 to 25 characters.</small>
</span>
</div>
</div>
</form>
You can use similar validation. The name attribute should match with the condition. Here it is url.
Add
name="locationSettingsForm"
to the <form> element

Angularjs : check if input is empty with ng-form

My code is the following :
<ng-form name="invitationForm">
<div ng-repeat="email in emails" ng-form='lineForm'>
<div class="has-feedback" ng-class="{'has-error': lineForm.$invalid && lineForm.input, 'has-success': lineForm.input && !lineForm.$invalid}">
<label class="control-label sr-only" for="inputSuccess">Input with success</label>
<input ng-change="inputCheck($index)" id="inputSuccess" placeholder="Enter your friend's email" name="input" ng-model="email.value" class="form-control input-mini" aria-describedby="inputSuccessStatus" type="email" />
</div>
</div>
</ng-form>
What I want to do is have the div with class "has-feedback" have class "has-error" when the lineForm is invalid and the input is not empty.
I put the condition lineform.$invalid && lineForm.input but lineForm.input doesn't seem to be working.
I also tried lineForm.input.length to no avail.
Thanks
http://plnkr.co/edit/se8iBxlUK6J0oS8lUWTn?p=preview
I don't think you need to create that many forms. Check out this example (several elements with required input:
<form role="form" name="theform">
<div ng-repeat="number in [1,2,3]">
<input type="text"
name="{{$index}}"
ng-model="number"
required="" />
</div>
{{ theform.$valid ? 'yes, valid form' : 'no, invalid' }}
<br/><br/>
<div ng-repeat="element in theform">
{{ element.$valid }}
</div>
<br/>
Explore this:
<br/><br/>
{{ theform }}
</form>
For further examples on what you can do with the formController:
https://docs.angularjs.org/api/ng/type/form.FormController

Resources