I have quantity:number variable and quantityArray: number[] array. In my template i have two buttons and one input field. when i click the buttons or when i change input field quantity must increment or decrement. and quantityArray must change its length according to quantity. When i click buttons everything works fine. But when i change the input field quantity changes but length of quantityArray is not changing
here's link
Ensure the value is treated as number
return new Array<number>(Number(qty));
Plunker example
Change input type to "number". It's text for now.
<input type="number" [ngModel]="quantity" (ngModelChange)="qtyChange($event)">
Related
I have an grid composed of lines. Each line has :
a number input filled by the user (amountWithoutTaxe)
a number label that should be automatically calculated after the previous one has been filled (amountWithTaxe) and that equals to thrice the previous one.
What I expect :
The user increases or decreases the first field and automatically the second one is updated.
Example : I put 2, then 6 is automatically displayed.
What I get :
The user increases or decreases the first field, the second one is only updated after he clicks on "add a line".
Example : I put 2, nothing is updated, I click on "add a line", then the field is updated.
This is the playground https://codesandbox.io/s/react-tsx-playground-forked-bss6sh?file=/src/index.tsx
I dont understand why its not working as expected, as the state is refreshed after the first input changes
It seems you are trying to do some changes on the state itself without the setLines function. If you change the attributes of lines that way, React does not know it needs to render, it needs to get a new array. The fix for this can be that in your onChange function you make a new variable called let newLines = [...lines] for example and do changes on it, then set newLines.
For your input element please consider the following change
<input
type="number"
value={line.amountWithoutTaxe}
onChange={(event) => {
let newLines = [...lines];
newLines[index].amountWithoutTaxe = event.target.valueAsNumber;
newLines[index].amountWithTaxe =
newLines[index].amountWithoutTaxe * 3;
setLines(newLines);
}}
></input>
I have an Angular 2+ app which has a component with an array and I have an ngFor which I show and I bind with [(ngModel)] to the elements of the array.
I have a button which adds on click and empty record to the last element of the array to edit. What I want is to focus to the input field which is at the last element of the array.
I think I need to use ViewChildren for that (because it is an array) and not ViewChild. Most tutorials that I have found use ViewChild to focus to a single element. What I want is to focus to the input field of each new record.
Yes you would use ViewChildren for this. ViewChildren returns a QueryList, which has an accessor method for the first and last items in the QueryList intuitively called last. If your ViewChildren variable is called children, you can get the last element with children.last
Putting it all together,
children.last.nativeElement.focus()
I am setting input field to invalid from javascript like this:
$scope.formName.fieldName.$setValidity("string", false);
This is working, but it affects the view only after clicking in a input field and then clicking out of it.
How can I change it in order to see the invalid field immediatelly?
You'll need to attach an ng-change="checker(model)" to your input field. Then just apply an ng-class to it to check for formName.fieldName.$error.string (since you put string as the error key) or you can also do formName.fieldName.$invalid && !formName.fieldName.$pristine
I've attached this codepen for you to play around with and see how to apply an invalid class on the field without having to lose focus on it.
Hope that helps!
I have a requirement that I need to let user only enter digits and - into date picker and prevent user from entering other characters, how can I achieve this?
for example I want prevent user from entering text like asasdfas in input field for datepicker.
I used this code in parseDate function inside uibDatepicker code but view doesn't get updated.
var regex = /[^0-9\-]/g;
viewValue = viewValue.replace(regex, '');
here is a plunk to play around: http://plnkr.co/edit/AKFhTG162Ck5Blt0ZBH7?p=preview
Changing the input type to date restricts the user from inputting any extra text.
<input type="date" />
The problem is that enables the HTML5 default date picker. I have added a little css to hide that part but you would need to check it other browsers. I was unable to remove the arrows and again I will leave you to do it.
Hope it helps. I forked your PLUNK HERE
In my AngularJS project, I am having a dropdown field as a directive and the values are coming from the backend.The user can also leave the field without selecting the dropdown(optional field) but the problem is, there is no empty field from the backend. So I need to add an empty field into the dropdown as default.
Since there is no option in the directive got struck in this issue.Googled a lot but didnt get any solutions yet.Kindly provide some suggestion.
Note:Client machine,cant post the code.
If there is no value set for the ng-model that the dropdown is bound to, Angular will provide a blank option by default that can be left in place (ignored) by the user and will result in your final value being whatever you set that ng-model to in the first place. If you need an actual empty string for the value, initialize it to that.
If you need to enable the user to select an empty value once they have already selected a value, you will need to add an empty value to the object that the dropdown is bound to. Add the empty value like this:
myPromise.then(function(data){
$scope.ddInfo = data;
$scope.ddInfo.unshift({id:'0000',text:'Not Applicable'});
});