Fill remaining input text fields with focused value
I have 3-4 products and their prices in table format.
My page looks like,
And my code looks like,
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales">
<input type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
ie a variable is binded to each text box.
Now what I need is
I have to create a new shotcut to auto fill all values using the value from the current focussed element (by row).
So if I enter 100 on the 1st column of 1st row and then press F2,
All the values in the first row should be replaced with 100.
I am able to listen to the keypress event and get the value of the current focussed element using the following code,
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.code === 'F2') {
if (document.activeElement['value']) {
}
}
}
But don't know how to fill this value to all sibling input fields.
I know it is a bad idea to use jQuery inside angular.
Any help to solve this in angular way?
javascript angular6
asked Nov 20 '18 at 10:09
Jobz
21017
add a comment |
I have 3-4 products and their prices in table format.
My page looks like,
And my code looks like,
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales">
<input type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
ie a variable is binded to each text box.
Now what I need is
I have to create a new shotcut to auto fill all values using the value from the current focussed element (by row).
So if I enter 100 on the 1st column of 1st row and then press F2,
All the values in the first row should be replaced with 100.
I am able to listen to the keypress event and get the value of the current focussed element using the following code,
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.code === 'F2') {
if (document.activeElement['value']) {
}
}
}
But don't know how to fill this value to all sibling input fields.
I know it is a bad idea to use jQuery inside angular.
Any help to solve this in angular way?
javascript angular6
asked Nov 20 '18 at 10:09
Jobz
21017
Not sure if I understand your code but did you try to fill in val.sales with the value ?
– MrAleister
Nov 20 '18 at 10:13
add a comment |
I have 3-4 products and their prices in table format.
My page looks like,
And my code looks like,
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales">
<input type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
ie a variable is binded to each text box.
Now what I need is
I have to create a new shotcut to auto fill all values using the value from the current focussed element (by row).
So if I enter 100 on the 1st column of 1st row and then press F2,
All the values in the first row should be replaced with 100.
I am able to listen to the keypress event and get the value of the current focussed element using the following code,
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.code === 'F2') {
if (document.activeElement['value']) {
}
}
}
But don't know how to fill this value to all sibling input fields.
I know it is a bad idea to use jQuery inside angular.
Any help to solve this in angular way?
javascript angular6
asked Nov 20 '18 at 10:09
Jobz
21017
I have 3-4 products and their prices in table format.
My page looks like,
And my code looks like,
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales">
<input type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
ie a variable is binded to each text box.
Now what I need is
I have to create a new shotcut to auto fill all values using the value from the current focussed element (by row).
So if I enter 100 on the 1st column of 1st row and then press F2,
All the values in the first row should be replaced with 100.
I am able to listen to the keypress event and get the value of the current focussed element using the following code,
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.code === 'F2') {
if (document.activeElement['value']) {
}
}
}
But don't know how to fill this value to all sibling input fields.
I know it is a bad idea to use jQuery inside angular.
Any help to solve this in angular way?
javascript angular6
javascript angular6
asked Nov 20 '18 at 10:09
Jobz
21017
asked Nov 20 '18 at 10:09
Jobz
21017
asked Nov 20 '18 at 10:09
Jobz
21017
asked Nov 20 '18 at 10:09
Jobz
21017
asked Nov 20 '18 at 10:09
Jobz
21017
21017
Not sure if I understand your code but did you try to fill in val.sales with the value ?
– MrAleister
Nov 20 '18 at 10:13
add a comment |
Not sure if I understand your code but did you try to fill in val.sales with the value ?
– MrAleister
Nov 20 '18 at 10:13
Not sure if I understand your code but did you try to fill in val.sales with the value ?
– MrAleister
Nov 20 '18 at 10:13
Not sure if I understand your code but did you try to fill in val.sales with the value ?
– MrAleister
Nov 20 '18 at 10:13
add a comment |
1 Answer
1
active
oldest
votes
For anyone who is searching solution for similar situation.
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales ; let k = index">
<input (keydown)="onKeydown($event, k, val )" type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
onKeydown(event, k, arr) {
if (event.code === 'F2' && k === 0) {
if (document.activeElement['value']) {
const elemval = document.activeElement['value'];
for (const elmnt of arr.sales) {
elmnt.value = elemval;
}
}
}
}
answered Dec 19 '18 at 8:58
Jobz
21017
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390644%2ffill-remaining-input-text-fields-with-focused-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
For anyone who is searching solution for similar situation.
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales ; let k = index">
<input (keydown)="onKeydown($event, k, val )" type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
onKeydown(event, k, arr) {
if (event.code === 'F2' && k === 0) {
if (document.activeElement['value']) {
const elemval = document.activeElement['value'];
for (const elmnt of arr.sales) {
elmnt.value = elemval;
}
}
}
}
answered Dec 19 '18 at 8:58
Jobz
21017
add a comment |
For anyone who is searching solution for similar situation.
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales ; let k = index">
<input (keydown)="onKeydown($event, k, val )" type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
onKeydown(event, k, arr) {
if (event.code === 'F2' && k === 0) {
if (document.activeElement['value']) {
const elemval = document.activeElement['value'];
for (const elmnt of arr.sales) {
elmnt.value = elemval;
}
}
}
}
answered Dec 19 '18 at 8:58
Jobz
21017
add a comment |
For anyone who is searching solution for similar situation.
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales ; let k = index">
<input (keydown)="onKeydown($event, k, val )" type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
onKeydown(event, k, arr) {
if (event.code === 'F2' && k === 0) {
if (document.activeElement['value']) {
const elemval = document.activeElement['value'];
for (const elmnt of arr.sales) {
elmnt.value = elemval;
}
}
}
}
answered Dec 19 '18 at 8:58
Jobz
21017
For anyone who is searching solution for similar situation.
<table>
<tr *ngFor="let val of prods">
<td class="sea">
<input type="text" [(ngModel)]="val.key" />
</td>
<td *ngFor="let sale of val.sales ; let k = index">
<input (keydown)="onKeydown($event, k, val )" type="text" [(ngModel)]="sale.value" />
</td>
</tr>
</table>
onKeydown(event, k, arr) {
if (event.code === 'F2' && k === 0) {
if (document.activeElement['value']) {
const elemval = document.activeElement['value'];
for (const elmnt of arr.sales) {
elmnt.value = elemval;
}
}
}
}
answered Dec 19 '18 at 8:58
Jobz
21017
answered Dec 19 '18 at 8:58
Jobz
21017
answered Dec 19 '18 at 8:58
Jobz
21017
answered Dec 19 '18 at 8:58
Jobz
21017
21017
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390644%2ffill-remaining-input-text-fields-with-focused-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Not sure if I understand your code but did you try to fill in val.sales with the value ?
– MrAleister
Nov 20 '18 at 10:13