It seems that the ngModel does not return anything at all when it's invalid.
I want to play with the value when only 2 or three characters is inserted!
<input
type="tel"
class="fullinput"
ng-model="xxxxx"
ng-minlength="12"
ng-maxlength="15"
required
/>
Just add name attribute to your form and to input. Then you'll be able to access needed value via:
in template {{myForm.xxx.$viewValue}}
in controller $scope.myForm.xxx.$viewValue
<form name="myForm">
<input
type="tel"
class="fullinput"
ng-model="xxxxx"
name="xxx"
ng-minlength="12"
ng-maxlength="15"
required
/>
</form>
Related
Being very new to Angular I have a kinda unusual request.
I have a bunch of input fields
<div class="blurb" ng:repeat="item in fieldData.postData">
<input type="text" class="form-control" ng-model="item.key" />
<input type="text" class="form-control" ng-model="item.operator" />
<input type="text" class="form-control" ng-model="item.value" />
</div>
The values of these fields inturn are bound to another field
<input name="finalVal" type="text" ng-model="fieldData.postData" />
All works fine and I get an object inside finalVal, but I want the object in string format. Is there a way to achieve it without any changes in my controller? The reason being finalVal is basically stored as a string in DB and I cannot modify the data type.
Appreciate the help
I have defined an input feild as
<form name="signUpForm">
<input type="text" name="username" ng-minlength="8" ng-maxlength="64" ng-model="user.username" ng-pattern="/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^]))/">
</form>
And defined user in controller as
$scope.user{};
Now when I bind user.username value in HTML, its preventing it.
<p ng-if="user.username.length > 0">Display True</p>
Even if I simply bind its value in HTML as
{{user.username}}
Its not being displayed.
Now if I remove ng-pattern from input field as :-
<input type="text" ng-minlength="8" ng-maxlength="64" ng-model="user.username">
then only its binding and that too after satisfying ng-minlength="8" condition. Means '12345678' is displayed and '1234567' not.
One more issue is there i.e. if I use ng-pattern then ng-minlength validation is not working.
<p ng-if="signUpForm.username.$error.minlength">Please enter minimum length</p>
You can try setting the form.$setViewValue.length instead of the model's length
for example:
<p ng-if="signUpForm.username.$setViewValue.length > 0">Display True</p>
here's a solution i found:
How do I prevent AngularJS from unbinding a form input's value from its model when it's invalid?
Sometimes forms become very complicated and it is impossible to test every case manually after code changes.
I already have unit testing with karma on the project.
Is there any tools or best practices how to test AngularJS form validation with jasmine and karma?
For example how can I test such form with jasmine and karma automatically?
<form name="appForm" novalidate>
<div>
Username: <input type="text" ng-model="data.username" name="username" ng-maxlength="15" required />
</div>
<div>
Email: <input type="email" ng-model="data.email" name="email" required />
</div>
<div>
Age: <input type="number" ng-model="data.age" name="age" />
</div>
<div>
<button ng-click="submit()" ng-disabled="appForm.$invalid">Submit</button>
</div>
</form>
It depends on what you actually want to make sure when testing form validation.
If you want to be sure invalid form will not be submited, then it is one case. And I don't see problems with this case.
If you want to be sure that appropriate messages are displayed for invalid fields, then, for example, you can make a directive, that is aware of all your possible field restrictions ('required', 'ng-maxlength', 'url', etc.) and is responsible for displaying appropriate error messages. So you will need to create tests only for this directive.
Example:
<input type="text" ng-model="data.username" my-directive name="username" ng-maxlength="15" required />
myDirective is aware of required and ng-maxlength restrictions, that were put on the field, & it is responsible for displaying appropriate error messages for invalid state of the field.
I have a simple form that accepts an input. For some reason when I change the value the scope variable changes to undefined.
<body ng-controller="myctrler">
<input ng-model="t.unsubscribeEmail" type="email" class="textboxfields" placeholder="Enter email address">
</body>
In the controller:
$scope.k=
{
unsubscribeEmail : "not"
};
The value before I enter anything into the inputbox is "not". As soon as I type something in the input the value changes to undefined.
What am I missing?
Change your input type text or write valide email
<input ng-model="t.unsubscribeEmail" type="text" class="textboxfields" placeholder="Enter email address">
or write valide email in
<input ng-model="t.unsubscribeEmail" type="email" class="textboxfields" placeholder="Enter email address">
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"