I have a form with an error field. Code is as follows:
<form name="myform" ng-submit="submit">
<input name="text" ng-model="username" required>
<div ng-messages="myform.username.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Is my logic of how ngMessages work correct? I tried setting "has_spaces" after the form is submitted but nothing works.
Your snippet is correct, except you need to access the form element for which you want to get errors by its name attribute and not the value of ng-model. I.e., instead of accessing myform.username.$error, you should access myform.text.$error. This snippet should do the job:
<form name="myform" ng-submit="submit">
<input name="text" ng-model="username" required>
<div ng-messages="myform.text.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Using ng-message, ng-maxlength, ng-minlength or any kind of validation in angular it use the name attribute instead of ng-model. So in your code you must use ng-messages = "myform.text.$error".
The problem is
you're referencing the model rather than the name of the input field itself in ng-messages.
You didn't define an input type. make type="text"
Renamed the input name to username, however in the model itself you should store it to an object IMO
I've corrected it below, try this instead
<form name="myform" ng-submit="submit">
<input name="username" type="text" ng-model="user.name" required>
<div ng-messages="myform.username.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Related
I passed an array value in my view with $userdata.
In my view, there's a button there that will show a modal when triggered. This modal will show the user data using the $userdata variable.
Now, I used angular js for my form inputs.
For example:
div class="form-group">
<label for="company_name" class="col-sm-12 control-label">Company Name</label>
<div id="company_name" class="col-sm-12">
<input type="text" class="form-control" name="company_name" value="{{$userData['company']['name']}}" ng-model="user.company_name" ng-required="true">
</div>
<div class="col-sm-12">
<span ng-show="userForm.company_name.$error.required && userForm.company_name.$touched"><br> <small><i>Name field is required</i></small></span>
</div>
</div>
The problem here is the input is not showing any value.
Why so? But when I removed the ng-model and just used a plain input field, the value will be shown.
You have to remove value="..." from input, ng-model will control it. look at this example.
<input type="text" class="form-control" name="company_name" ng-model="user.company_name" ng-required="true">
I'm new in AngulsrJS and I've got following code:
<form ng-if="editorCtrl.edit" class="form-horizontal" role="form" ng-submit="editorCtrl.saveEntry()">
<div class="form-group">
<div class="col-md-6" ng-repeat="(key,field) in editorCtrl.editEntry">
<label>{{key}}</label>
<input type="text" class="form-control" value={{field}} />
</div>
</div>
<!-- ng-model="editorCtrl.toSave[key]" ng-value="{{field}}" that part was in input attributes -->
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Update selected entry" ng-disabled="form.$invalid" class="btn btn-primary"/>
</div>
</div>
</form>
Now I need to obtain values from input fields. I tried to use ng-model="editorCtrl.toSave[key], but it's not working in a correct way.
Any suggestions how to resolve this situation ?
if you can consider no necesary the "toSave" object maybe you can use the 2-way data binding properly only using editEntry Object :
<input type="text" class="form-control" value={{field}} ng-model="editorCtrl.editEntry[key]"/>
In this way after a submit you will get editEntry with the fields modifieds (or not), here is an example
https://jsfiddle.net/pv8qrwty/1/
run the example and if you modified the fields after you press the submit button it will be displayed in your browser console
hope this help ! and sorry for my english !
Trying to show a message of how many chars were used for a text field as-you-type (similar to the comments in Stackoverflow)
I'm using AngularJs with a form.
Code looks like this:
<form name="form">
<input type="text" name="inp" ng-model="myval" ng-minlength="10">
<span>
You have used --INPUT-LENGTH--
</span>
</form>
How can I make --INPUT-LENGTH-- show the current length of the input field?
Thanks!
simple use the .length attribute
<form name="form">
<input type="text" name="inp" ng-model="myval">
<span>
You have used {{myval.length}}
</span>
</form>
In its simplest form you can rely on angular binding mechanism which will update dependent variables when things change.
<form name="form">
<input type="text" name="inp" ng-model="myval">
<span>
You have used {{myval.length}} characters
</span>
</form>
I can not get Angular.js required or ng-required to work. I want it to where if the user hits ok, they have to have some text in the textbox.
<div class="modal-body">
<p>Your change will be logged. Please provide a ticket number or comment for reference</p>
<div class="row">
<div class="span4">
<textarea type="text" class="form-control"
ng-model="commentBox.text"
ng-required="commentBox.text">
</textarea>
</div>
</div>
</div>
Scratching my head.....
two things:
make sure that value you are passing to ng-required is boolean (to be technically correct, it should evaluate to boolean)
<textarea type="text" class="form-control"
ng-model="commentBox.text"
ng-required="commentBox.textRequired">
</textarea>
//somewhere in your controller
$scope.commentBox.textRequired = true
you would need form.$invalid on your button
<button type="submit" ng-disabled="formname.$invalid" ng-click="onsubmit()"></button>
so to complete it
<ng-form name="exampleForm">
<textarea type="text" ng-model="commentBox.text" ng-required="true"></textarea>
<button ng-disabled="exampleForm.$invalid" ng-click="onsubmit()"></button>
</ng-form>
also without adding another prop, you could set it to
ng-required="!!commentBox.text"
I'm having trouble getting a message to display when the field input is invalid. I can see the classes being correctly applied to the element i.e. ng-dirty ng-invalid ng-invalid-pattern so I just need to make the error message display. Is there an issue with my html?
Thanks!
<form ng-controller="FormCtrl" name="TestForm" action="http://myserver/api" method="post" novalidate>
<div class="form-group">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-ng-model="model.tfn">
<span class="error" data-ng-show="model.tfn.$invalid">Correct input etc...</span>
</div>
</form>
The information you are looking for is part of the FormController. You need to setup a formController via ng-form directive:
<div class="form-group" ng-form="myForm">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-mg-model="model.tfn">
<span class="error" data-ng-show="myForm.vld.$invalid">Correct input etc...</span>
</div>
If this is done you may access the information by [Name of the OFrmController].[Name of the input field].$invalid e.g. myForm.vld.$invalid