how do I trigger the error messages without knowing the input name? See the code below:
<input class="form-control"
id="{{field.field_id}}"
set-name="{{field.field_id}}"
type="text"
ng-model="field.field_value"
ng-minlength="field.field_char_num_min"
ng-maxlength="field.field_char_num_max"/>
<div ng-messages="don't know the input name yet" class="my-messages">
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
In ng-messages should be written the path to errors from the input, like myForm.inputName.$error. But the Inputs will be generated and appended automatically so I can't write the name because a generator sets the names. I have to get a hold of the input name. How can I do it?
Try something like this in in ng-message
<form name="formName">
<input type="text" id="anyName" name="anyName" required/>
<span ng-show="formName.anyName.$error.required"> Please enter a value.</span>
</form>
You could use field[field.field_id]['$invalid'] to determine whether field is valid or not, and then by using field[field.field_id]['$error'] show minlength & maxlength error
Markup
<div ng-show="field[field.field_id]['$invalid']" class="my-messages">
<div ng-message="field[field.field_id]['$error'].minlength">Your field is too short</div>
<div ng-message="field[field.field_id]['$error'].maxlength">Your field is too long</div>
</div>
Related
Here is the basic way to use ngMessages module. myForm.myName.$error return list of error. I want to get number of errors. I have tried {{myForm.myName.$error | json}}.length and myForm.myName.$error.length.
<form name="myForm">
<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 ng-message-default>This field has an input error</div>
</div>
</form>
In case you missed it in the documentation for the ngMessages module.
By default, ngMessages will only display one message for a particular key/value collection at any time.
This means myForm.myName.$error can only ever have a maximum of one property.
If you want to support the display of multiple messages, apply the ng-messages-multiple attribute alongside the ng-messages directive. With this applied, you can retrieve the number of active errors by creating a helper function.
function getErrorCount() {
return Object.keys(myForm.myName.$error).length;
}
Here's a demonstration of the suggestion above.
I'm trying to validate a phone number using the ngMessages and ngMessage directives, but I am facing two problems:
The "Invalid Input" message is shown only after the pattern's expression is met and the user continued typing.
The "required" message is not shown when the input is empty.
I want the "Invalid Input" to be shown as soon as the user starts typing, and not only after the pattern is met.
I don't understand what is wrong with my code, so I'd appreciate any help.
<form name="PhoneForm">
<div>
<md-icon md-svg-src="icons/ic_phone_48px.svg"></md-icon>
<md-input-container>
<label>Phone</label>
<input ng-model="contactPhone" name="PhoneInput" required ng-pattern="/^(05){1}[0-9]{8}$/"/> <!-- i.e 05x-xxxxxxx -->
<div ng-messages="PhoneForm.PhoneInput.$error" ng-if="PhoneForm.PhoneInput.$dirty">
<div ng-message="required">This field is required!</div>
<div ng-message="pattern">Invalid Input!</div>
</div>
</md-input-container>
</div>
Thank you
I'm new with angular forms, i'm trying to validate an email field, and sho a message if the input is invalid.
Ithinked to have do everything correctly, but the error message doesen't show.
<form name="Login" novalidate>
<div class="ama-col-sm-12 pad-top-20-xs form-group">
<label class="copy-title mts-bold pad-bottom-10-xs d-block">E-MAIL</label>
<input type="email" ng-model="Login.userMail" required ng-class="{'invalidClass': Login.userMail.$invalid}">
<div ng-show="Login.userMail.$invalid">
Non va mica bene
</div>
</div>
</form>
Can you tell me if in the markup there is something wrong please?
put name attribute on your email input field and then use the field name while show/hide validation message.
Also make sure your form name and ng-model object shouldn't be the same otherwise it will get wiped off. In this case Login and ng-model's Login were conflicting.
<form name="Login" novalidate>
<div class="ama-col-sm-12 pad-top-20-xs form-group">
<label class="copy-title mts-bold pad-bottom-10-xs d-block">E-MAIL</label>
<input type="email" name="email" ng-model="user.userMail" required
ng-class="{'invalidClass': Login.email.$invalid}">
<div ng-show="Login.email.$invalid">
Non va mica bene
</div>
</div>
</form>
I am trying to call a 'custom validation directive' by watching the ngModel.
My submit function name is dotted.[sllr.save()]
<div class="col-sm-10"><input type="text" placeholder="must be numeric" class="form-control" name="meterCount" ng-model="sllr.entity.MeterCount" is-number>
<div class="m-t-xs" ng-show="sllr.save.meterCount.$invalid && sllr.save.submitted">
<small class="text-danger" ng-show="sllr.save.meterCount.$error.cvalid"></small>
</div>
How should I type this funtion name in ngShow?
I solved. I thought that I should use the value in ng-submit. But actually giving a name to form itself works.
<form method="post" class="form-horizontal" **name="seller_create"** ng-submit="sllr.save()">
I have a form with input fields generated with an ng-repeat. The field names are set dynamically from the model. I cannot get validation to work.
Here is the input field that is repeated within ng-repeat:
<input class="form-control input" type="number" id="item.id" name="item.name" ng-change="ctrl.updateSub(item)" ng-model="item.qty" max="item.maxqty" min="0">
I am trying to validate against the max value, which is also set dynamically.
What I cannot find anywhere is how to set the name within the ng-show classes.
<div class="col-sm-2 error" ng-show="form.{{item.name}}.$invalid">
<small class="error" ng-show="form.{{item.name}}.$error.max">
You exceeded the maximum allowed
</small>
</div>
How am I supposed to handle the {{item.name}} bit?
Thanks in advance for any help or pointers.
Angular 1.3.12
Firstly form is a reserved keyword, you cannot use that as your form name.
Coming to your problem, unfortunately as of right now it is not possible to generate dynamic names for form inputs.
You can achieve what you want with the help of ng-form
Have a look at this example :
<form name="yourForm" >
<div ng-repeat="field in fields" ng-form="myInnerForm">
<input type="text" name="dynamic_input" ng-model="field.name"/>
<div ng-show="myInnerForm.dynamic_input.$dirty && myInnerForm.dynamic_input.$invalid">
The field is required.
</div>
</div>
</form>