I have an input box and my model is undefined for somereason when I try to access it in controller.
Below is the input box
<input type="text" ng-if="primaryOperator == 'Age'"
ng-model="primaryValueData" placeholder="enter Value"
class="hideOutlineClass" />
when i try to access $scope.primaryValueData in controller it is undefined. I cannot use ng-show have to use ng-if. Any help is appreciated
Try like this,
<div ng-if="primaryOperator === 'Age'">
<input type="text"
ng-model="primaryValueData" placeholder="enter Value"
class="hideOutlineClass" />
</div>
Related
I have used the following code segment where I wanted to change the value of the input box when it is loaded, but it didn't work
test.template.html
<div class="col-value">
<input type="text" class="input-box" autofocus="autofocus" ng-blur="saveData(value)" ng-class="getColor(value)" ng-model="value" >%
</div>
getColor function is written in the controller where the color is decided according to the value given.
Could soomeone help me to solve this issue ? Thanks inadvance
The above code is correctly work when the relevant css classes are set into the input box as follows.
<span class="color">
<div class="col-value">
<input type="text" class="input-box" autofocus="autofocus" ng-blur="saveData(value)" ng-class="getColor(value)" ng-model="value" >%
</div>
</span>
I have a search field and i want that the binding of search textbox reflected after some time.Thanks in advance.
Here is my code
<div ng-controller="appointment as vm">
Search By Description : <input class="form-control" placeholder="search by description" type="text" ng-model="vm.filterText" />
{{vm.filterText}} </div>
You could use ng-model-options on your input field
<input type="text" ng-model="vm.filterText" ng-model-options="{debounce: { 'default': 10000}"/>
the ng-model-options directive will surely help you. You can update the binding after specified time or on blur event.
try this code
Search By Description : <input class="form-control" placeholder="search by description" type="text" ng-model="vm.filterText" ng-model-options={ debounce: 1000 } />
See example of ng-model-options http://learnit.visrosoftware.com/try/kfPWlU4N
Try using $interval in your directive. If you can share your directive as well, that will 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?
I have a textbox for phonenumber and I need to enter the phonenumber in xxx-xxx-xxxx format in the textbox.
I have tried below examples but thy are not working
<input type='text' ng-model='nerecord.phonenumber' mask='xxx-xxx-xxxx'/>
<input type='text' ng-model='nerecord.phonenumber' ng-pattern='/^[1-10]\d{2}([.-]?)\d{3}\1\d{4}$/'/>
Can anyone help me. How to do this?
Seems your regex isn't correct.
try this one /^\d{3}-\d{3}-\d{4}$/
I don't see anything to handle the case your phone number is invalid.
try to render something like that :
<form name="myForm" ng-submit="yourSaveFunction()">
<p ng-class="{ error: !myForm.phoneNumber.$valid }"> <!-- You must handle your css with this class -->
<label ng-if="!myForm.phoneNumber.$valid">Phone Number not OK</label>
<input name="phoneNumber" type='text' ng-model='nerecord.phonenumber' ng-pattern='someRegex'/> <!-- idk anything about regex -->
</p>
<p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</p>
UI Mask example:
<input ng-model="nerecord.phonenumber" ui-mask="999-999-9999" type="text"/>
Also if you have to validate the input then there is an option in config to prevent clearing the value on blur.
clearOnBlur: false
Mask.js
I am currently facing the following problem:
I would like to validate my form input using the Angular ngModel directives.
When using those together with $scope they work fine.
Now, working with the controllerAs syntax, they fail to work.
This problem is poorly documented, the only help I could find is this article.
Here is a small example of my code:
The template gets called with myController as vm
<form name="vm.signUpForm" ng-submit="vm.signup(vm.user)">
<label for="name">Name</label>
<input type="text"
class="form-control"
id="name"
name="name"
placeholder="Full name"
ng-model="vm.user.name"
ng-minlength="2" required />
<div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
<span ng-show="vm.signUpForm.name.$error.required">Please fill in your name</span>
<span ng-show="vm.signUpForm.name.$error.minlength">A minimum of 2 [...]</span>
</div>
[...]
</form>
Am I forced to use $scope to validate the form? Or did I miss something ?
Thanks in advance!
Solution by: Andrew Gray
I had to change the following lines to get this to work:
<form name="vm.signUpForm" ... >
<!-- To -->
<form name="signUpForm" ...>
<div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
<!-- To -->
<div ng-if="signUpForm.name.$invalid">
<span ng-show="vm.signUpForm.name.$error.required" ... >
<!-- To -->
<span ng-show="signUpForm.name.$error.required" ... >
First things first - you don't need the vm. on the form.
<form novalidate name="someForm">
<label>
Some Text:
<span class="danger-text" ng-if="someForm.someText.$invalid">
ERROR!
</span>
</label>
<input type="text" name="someField" />
</form>
The way it winds up working, is that there's a validation object that is not tied to the scope. The controllerAs syntax is just spinning off a instance of the controller as a scope variable.
Try shaving off the vm. from the form and child elements' names, and you should be OK.