In the controller I add a (numerical) value to the controller:
this.myValue = Number(elem.toFixed(2));
I put it inside an input form:
<input class="my-input"
type="number"
value={{$ctrl.myValue}}
...
>
the value is correct, everything is shown as expected on the screen but I got this warning message in console:
The specified value "{{$ctrl.myValue}}" is not a valid number. The
value must match to the following regular expression:
-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
Any ideas how to get rid of it?
Use
$scope.myValue = 0;
in the controller to initialize the variable.and then use it as -
<input type="text" ng-model="myValue" >
Then you can access it anywhere in the controller using $scope.myValue.
As suggested by Aleksey Solovey, if value is changed to an ng-model and curly brackets are replaced by quotes the warning message disappear in this case.
<input class="my-input"
type="number"
ng-model="$ctrl.myValue"
...
>
Related
<input type="text" class="form-control" id="exampleInputEmail2"
name="productName" value={{product.productName}} >
Inside my product.productName = Smart Phones, but it only shows 'Smart' inside the input field
How to show may whole string in my input field in HBS
Please provide quotes for the value. I think this will help you to figure out the error:
eg:
value="{{product.productName}}"
I have a table created with ng-repeat and I want to execute some action after I change quantity from one value to another (and also it would be nice to have original value before the change). I tried using ng-change="myFunction(result, {{result.modelValue}})" but the problem is that this event is triggered by every keystroke and so I typed, say, 7 and actually want to type 70, but the event already happened. I also tried ng-blur, but then nothing happened at all (my function was not even called). Note, that I also have ng-click in the ng-repeat.
Do you know which event should I attempt to hook to and what is the best way to trace original value before the change (also, the complication is that I'm in the ng-repeat loop).
This is my current html (also, looks like it may have been a typo in my original code):
<td ng-if="result.isMatrix===false">
<div class="input-field-line-items">
<input type="number" name="quantity"
ng-model="result.quantity"
ng-disabled="crud.model.status===3"
class="form-control form-control-sm text-right"
ng-mouseleave="crud.quantityChanged(result)"
ng-class="{'input-has-error' : (result.quantity===null || lineItemForm.quantity.$error.max || lineItemForm.quantity.$error.min) && lineItemForm.quantity.$dirty}"
min="0"
max="2147483647" />
</div>
</td>
Based on the suggestions given I was almost able to get all working but I just found a case where my code doesn't work. This happens when I type bad value (say, -10). In this case I see an error in console. Here is my current html:
<div class="input-field-line-items">
<input type="number" name="quantity"
ng-model-options="{ updateOn: 'blur' }"
ng-model="result.quantity"
ng-disabled="crud.model.status===3"
class="form-control form-control-sm text-right"
ng-change="crud.quantityChanged(result, {{result.quantity}})"
ng-class="{'input-has-error' : (result.quantity===null || matrixLineItemForm.quantity.$error.max || matrixLineItemForm.quantity.$error.min) && matrixLineItemForm.quantity.$dirty}"
min="0"
max="2147483647" />
</div>
And this is the error I'm seeing after typing a negative value:
angular.js?v=hfDjvhqzZ7xKaOtdmnQ3FhY12ud2J6HVALMF-ee3YJo1:14525 Error: [$parse:syntax] Syntax Error: Token ')' not a primary expression at column 30 of the expression [crud.quantityChanged(result, )] starting at [)].
http://errors.angularjs.org/1.6.4/$parse/syntax?p0=)&p1=not%20a%20primary%20expression&p2=30&p3=crud.quantityChanged(result%2C%20)&p4=)
What should I change in the above to fix this issue?
I found the following thread which seems relevant but a bit above my head and I'd rather not introduce new directives into this mix if possible:
How to use the last valid modelValue if a model becomes invalid?
I have started to learn AngularJS and this is what amazes me, at the beginning even a four lines of code does not work properly and I have no clue
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div data-ng-app="">
<input type="text" ng-model="name='Rocky'">
Your name is {{name}}
</div>
On typing something in the textbox, my expression does not change.
It shows the below error in the console.
TypeError: r is not a function
You can't initialize to Rocky inside ng-model. Try this:
<div data-ng-app="">
<input type="text" ng-model="name" ng-init="name='Rocky'">
Your name is {{name}}
</div>
Docs
This error occurs when expression the ngModel directive is bound to is a non-assignable expression.
You need to initialize using ngInit directive. You cannot initialize using ngModel
The ngInit directive allows you to evaluate an expression in the current scope.
<input type="text" ng-init="name='Abhinav'" ng-model="name" />
DEMO
Using ng-value instead of ng-model worked for me.
Does Angular Material Design require an input ng-model to be equal to a variable in order for required to work?
Without using Material Design, the following error checking works perfectly fine.
<label>First Name (as it appears on your card)</label>
<input type="text" name="firstName" data-ng-model="test" required/>
Using Material Design though, the following always returns invalid unless the user types something, deletes it, and types something else.
<md-input-container>
<label>First Name (as it appears on your card)</label>
<input type="text" name="firstName" data-ng-model="test" required/>
</md-input-container>
However, I set test equal to something in the scope, then error checking works fine:
$scope.test = 'this value';
Is there a way to error check using Material Design without needing to specify a default value for fields?
I think you might not have initialized the ng-model variable in the controller.
Try initializing the variable,
$scope.test = '';
I have this value here:
{{step1.$valid}}
which returns false. What I am trying to do is get the text "false" to appear in an input text box:
<input type="text" ng-model="user.stepValidation" ng-value="{{step1.$valid}}"/>
I have also tried value and ng-bind and neither of these get the value from {{step1.$valid}} to appear in my input text...please help.
Try this:
<input type="text" ng-model="user.stepValidation.step1.$valid"/>
Here's a Fiddle.