Angular 2 - 2 Way Binding with NgModel in NgForngModel inside two ngFor - Angular/Ionicnext value changes on the screen when changing a list of numbersAngular unique values for different rows NgModelAngular 4 - “Can't bind to 'ngModel' since it isn't a known property of 'input' ” errorAngular 2 form with array of object inputsAngular binding object with array from component to view with ngModelsAngular 5 - Strange behaviour with input text and ngModelTwo way data binding an array angular 6`ngModel` not working properly when bind to an input tag in ngFor, It loose focus when i start typingAngular ngModel in ngFor binding to the same ModelAngular HTML bindingCan't bind to 'ngModel' since it isn't a known property of 'input'Angular 2: “Can't bind to 'ngModel'” error when FormsModule is imported in app.moduleAngular2 (final version) *ngFor in component: Can't bind to 'ngForOf' since it isn't a known property of 'div'Angular Can't bind to 'ngModel' since it isn't a known property ofangular 4 material show formArrayName with ngFor and ngModelNested *ngFor in Angular 2Angular 5 bind to a custom propertiesDynamic binding ngModel in ngFor loopAngular: common way to bind a input-variable
What would happen to a modern skyscraper if it rains micro blackholes?
What defenses are there against being summoned by the Gate spell?
Writing rule stating superpower from different root cause is bad writing
Minkowski space
How to find program name(s) of an installed package?
What typically incentivizes a professor to change jobs to a lower ranking university?
Why are electrically insulating heatsinks so rare? Is it just cost?
How can I make my BBEG immortal short of making them a Lich or Vampire?
How much RAM could one put in a typical 80386 setup?
Collect Fourier series terms
What do the dots in this tr command do: tr .............A-Z A-ZA-Z <<< "JVPQBOV" (with 13 dots)
How to write a macro that is braces sensitive?
Is it tax fraud for an individual to declare non-taxable revenue as taxable income? (US tax laws)
Why doesn't Newton's third law mean a person bounces back to where they started when they hit the ground?
Arthur Somervell: 1000 Exercises - Meaning of this notation
Test if tikzmark exists on same page
"You are your self first supporter", a more proper way to say it
Font hinting is lost in Chrome-like browsers (for some languages )
Dragon forelimb placement
In Japanese, what’s the difference between “Tonari ni” (となりに) and “Tsugi” (つぎ)? When would you use one over the other?
I’m planning on buying a laser printer but concerned about the life cycle of toner in the machine
Why does Kotter return in Welcome Back Kotter?
What is the offset in a seaplane's hull?
tikz: show 0 at the axis origin
Angular 2 - 2 Way Binding with NgModel in NgFor
ngModel inside two ngFor - Angular/Ionicnext value changes on the screen when changing a list of numbersAngular unique values for different rows NgModelAngular 4 - “Can't bind to 'ngModel' since it isn't a known property of 'input' ” errorAngular 2 form with array of object inputsAngular binding object with array from component to view with ngModelsAngular 5 - Strange behaviour with input text and ngModelTwo way data binding an array angular 6`ngModel` not working properly when bind to an input tag in ngFor, It loose focus when i start typingAngular ngModel in ngFor binding to the same ModelAngular HTML bindingCan't bind to 'ngModel' since it isn't a known property of 'input'Angular 2: “Can't bind to 'ngModel'” error when FormsModule is imported in app.moduleAngular2 (final version) *ngFor in component: Can't bind to 'ngForOf' since it isn't a known property of 'div'Angular Can't bind to 'ngModel' since it isn't a known property ofangular 4 material show formArrayName with ngFor and ngModelNested *ngFor in Angular 2Angular 5 bind to a custom propertiesDynamic binding ngModel in ngFor loopAngular: common way to bind a input-variable
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
29
In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.
Plunkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
angular typescript edited Oct 28 '18 at 17:33
displayname
6,6681785178
asked Oct 29 '16 at 0:06
Ka TechKa Tech
2,71793149
add a comment |
29
In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.
Plunkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
edited Oct 28 '18 at 17:33
displayname
6,6681785178
asked Oct 29 '16 at 0:06
Ka TechKa Tech
2,71793149
You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate?
– Ben Richards
Oct 29 '16 at 0:22
It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly.
– Ka Tech
Oct 29 '16 at 0:58
Just post an answer :-)
– Paul Samsotha
Oct 29 '16 at 1:36
add a comment |
29
29
29
9
In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.
Plunkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
edited Oct 28 '18 at 17:33
displayname
6,6681785178
asked Oct 29 '16 at 0:06
Ka TechKa Tech
2,71793149
In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.
Plunkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
edited Oct 28 '18 at 17:33
displayname
6,6681785178
asked Oct 29 '16 at 0:06
Ka TechKa Tech
2,71793149
edited Oct 28 '18 at 17:33
displayname
6,6681785178
asked Oct 29 '16 at 0:06
Ka TechKa Tech
2,71793149
edited Oct 28 '18 at 17:33
displayname
6,6681785178
edited Oct 28 '18 at 17:33
displayname
6,6681785178
edited Oct 28 '18 at 17:33
displayname
6,6681785178
6,6681785178
asked Oct 29 '16 at 0:06
Ka TechKa Tech
2,71793149
asked Oct 29 '16 at 0:06
Ka TechKa Tech
2,71793149
asked Oct 29 '16 at 0:06
Ka TechKa Tech
2,71793149
2,71793149
You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate?
– Ben Richards
Oct 29 '16 at 0:22
It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly.
– Ka Tech
Oct 29 '16 at 0:58
Just post an answer :-)
– Paul Samsotha
Oct 29 '16 at 1:36
add a comment |
You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate?
– Ben Richards
Oct 29 '16 at 0:22
It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly.
– Ka Tech
Oct 29 '16 at 0:58
Just post an answer :-)
– Paul Samsotha
Oct 29 '16 at 1:36
You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate?
– Ben Richards
Oct 29 '16 at 0:22
You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate?
– Ben Richards
Oct 29 '16 at 0:22
It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly.
– Ka Tech
Oct 29 '16 at 0:58
It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly.
– Ka Tech
Oct 29 '16 at 0:58
Just post an answer :-)
– Paul Samsotha
Oct 29 '16 at 1:36
Just post an answer :-)
– Paul Samsotha
Oct 29 '16 at 1:36
add a comment |
3 Answers
3
active
oldest
votes
61
After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.
Working Plnkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
<input [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
trackByIndex(index: number, obj: any): any
return index;
answered Oct 29 '16 at 3:16
Ka TechKa Tech
2,71793149
19
Actually thetrackBydoes not matter in your code! What matters is[(ngModel)]="toDos[index]"instead of[(ngModel)]="item"
– Lars
Mar 1 '17 at 7:36
10
@Lars without the trackBy the input loses focus and seems to hang in my experience.
– Reed
Jan 31 '18 at 22:28
7
Without the trackByngForre-creates the DOM every time you change a string in your array, so this is totally necessary.
– Marc J. Schmidt
Mar 22 '18 at 2:12
@Ka Tech Provided plunker has errors
– Imants Volkovs
Apr 11 '18 at 9:02
add a comment |
25
What you have done is not working because of two reasons.
- You have to use toDos[index] instead of item with ngModel (Read for more info)
- Each input has to have a unique name
Here's the working solution for your problem.
<div>
<div *ngFor="let item of toDos;let index = index;">
<input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
answered Nov 30 '17 at 7:17
Lasitha YapaLasitha Yapa
1,41722236
1
I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
– Brian Bauman
Jul 4 '18 at 3:58
Glad I could help
– Lasitha Yapa
Jul 4 '18 at 6:26
add a comment |
-1
Try this
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item.text" placeholder="item.text">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item.text</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
constructor()
ngOnInit()
edited Jan 14 at 21:31
Simone Nigro
2,62621746
answered Dec 30 '18 at 15:27
VickyVicky
494
Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
– Suyash Gulati
Mar 27 at 14:03
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
);
);
draft saved
draft discarded
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%2f40314732%2fangular-2-2-way-binding-with-ngmodel-in-ngfor%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
61
After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.
Working Plnkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
<input [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
trackByIndex(index: number, obj: any): any
return index;
answered Oct 29 '16 at 3:16
Ka TechKa Tech
2,71793149
19
Actually thetrackBydoes not matter in your code! What matters is[(ngModel)]="toDos[index]"instead of[(ngModel)]="item"
– Lars
Mar 1 '17 at 7:36
10
@Lars without the trackBy the input loses focus and seems to hang in my experience.
– Reed
Jan 31 '18 at 22:28
7
Without the trackByngForre-creates the DOM every time you change a string in your array, so this is totally necessary.
– Marc J. Schmidt
Mar 22 '18 at 2:12
@Ka Tech Provided plunker has errors
– Imants Volkovs
Apr 11 '18 at 9:02
add a comment |
61
After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.
Working Plnkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
<input [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
trackByIndex(index: number, obj: any): any
return index;
answered Oct 29 '16 at 3:16
Ka TechKa Tech
2,71793149
19
Actually thetrackBydoes not matter in your code! What matters is[(ngModel)]="toDos[index]"instead of[(ngModel)]="item"
– Lars
Mar 1 '17 at 7:36
10
@Lars without the trackBy the input loses focus and seems to hang in my experience.
– Reed
Jan 31 '18 at 22:28
7
Without the trackByngForre-creates the DOM every time you change a string in your array, so this is totally necessary.
– Marc J. Schmidt
Mar 22 '18 at 2:12
@Ka Tech Provided plunker has errors
– Imants Volkovs
Apr 11 '18 at 9:02
add a comment |
61
61
61
After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.
Working Plnkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
<input [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
trackByIndex(index: number, obj: any): any
return index;
answered Oct 29 '16 at 3:16
Ka TechKa Tech
2,71793149
After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.
Working Plnkr
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
<input [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: string[] =["Todo1","Todo2","Todo3"];
constructor()
ngOnInit()
trackByIndex(index: number, obj: any): any
return index;
answered Oct 29 '16 at 3:16
Ka TechKa Tech
2,71793149
answered Oct 29 '16 at 3:16
Ka TechKa Tech
2,71793149
answered Oct 29 '16 at 3:16
Ka TechKa Tech
2,71793149
answered Oct 29 '16 at 3:16
Ka TechKa Tech
2,71793149
2,71793149
19
Actually thetrackBydoes not matter in your code! What matters is[(ngModel)]="toDos[index]"instead of[(ngModel)]="item"
– Lars
Mar 1 '17 at 7:36
10
@Lars without the trackBy the input loses focus and seems to hang in my experience.
– Reed
Jan 31 '18 at 22:28
7
Without the trackByngForre-creates the DOM every time you change a string in your array, so this is totally necessary.
– Marc J. Schmidt
Mar 22 '18 at 2:12
@Ka Tech Provided plunker has errors
– Imants Volkovs
Apr 11 '18 at 9:02
add a comment |
19
Actually thetrackBydoes not matter in your code! What matters is[(ngModel)]="toDos[index]"instead of[(ngModel)]="item"
– Lars
Mar 1 '17 at 7:36
10
@Lars without the trackBy the input loses focus and seems to hang in my experience.
– Reed
Jan 31 '18 at 22:28
7
Without the trackByngForre-creates the DOM every time you change a string in your array, so this is totally necessary.
– Marc J. Schmidt
Mar 22 '18 at 2:12
@Ka Tech Provided plunker has errors
– Imants Volkovs
Apr 11 '18 at 9:02
19
19
Actually the
trackBy does not matter in your code! What matters is [(ngModel)]="toDos[index]" instead of [(ngModel)]="item"– Lars
Mar 1 '17 at 7:36
Actually the
trackBy does not matter in your code! What matters is [(ngModel)]="toDos[index]" instead of [(ngModel)]="item"– Lars
Mar 1 '17 at 7:36
10
10
@Lars without the trackBy the input loses focus and seems to hang in my experience.
– Reed
Jan 31 '18 at 22:28
@Lars without the trackBy the input loses focus and seems to hang in my experience.
– Reed
Jan 31 '18 at 22:28
7
7
Without the trackBy
ngFor re-creates the DOM every time you change a string in your array, so this is totally necessary.– Marc J. Schmidt
Mar 22 '18 at 2:12
Without the trackBy
ngFor re-creates the DOM every time you change a string in your array, so this is totally necessary.– Marc J. Schmidt
Mar 22 '18 at 2:12
@Ka Tech Provided plunker has errors
– Imants Volkovs
Apr 11 '18 at 9:02
@Ka Tech Provided plunker has errors
– Imants Volkovs
Apr 11 '18 at 9:02
add a comment |
25
What you have done is not working because of two reasons.
- You have to use toDos[index] instead of item with ngModel (Read for more info)
- Each input has to have a unique name
Here's the working solution for your problem.
<div>
<div *ngFor="let item of toDos;let index = index;">
<input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
answered Nov 30 '17 at 7:17
Lasitha YapaLasitha Yapa
1,41722236
1
I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
– Brian Bauman
Jul 4 '18 at 3:58
Glad I could help
– Lasitha Yapa
Jul 4 '18 at 6:26
add a comment |
25
What you have done is not working because of two reasons.
- You have to use toDos[index] instead of item with ngModel (Read for more info)
- Each input has to have a unique name
Here's the working solution for your problem.
<div>
<div *ngFor="let item of toDos;let index = index;">
<input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
answered Nov 30 '17 at 7:17
Lasitha YapaLasitha Yapa
1,41722236
1
I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
– Brian Bauman
Jul 4 '18 at 3:58
Glad I could help
– Lasitha Yapa
Jul 4 '18 at 6:26
add a comment |
25
25
25
What you have done is not working because of two reasons.
- You have to use toDos[index] instead of item with ngModel (Read for more info)
- Each input has to have a unique name
Here's the working solution for your problem.
<div>
<div *ngFor="let item of toDos;let index = index;">
<input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
answered Nov 30 '17 at 7:17
Lasitha YapaLasitha Yapa
1,41722236
What you have done is not working because of two reasons.
- You have to use toDos[index] instead of item with ngModel (Read for more info)
- Each input has to have a unique name
Here's the working solution for your problem.
<div>
<div *ngFor="let item of toDos;let index = index;">
<input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item</label>
</div>
answered Nov 30 '17 at 7:17
Lasitha YapaLasitha Yapa
1,41722236
edited Nov 30 '17 at 15:59
answered Nov 30 '17 at 7:17
Lasitha YapaLasitha Yapa
1,41722236
answered Nov 30 '17 at 7:17
Lasitha YapaLasitha Yapa
1,41722236
answered Nov 30 '17 at 7:17
Lasitha YapaLasitha Yapa
1,41722236
1,41722236
1
I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
– Brian Bauman
Jul 4 '18 at 3:58
Glad I could help
– Lasitha Yapa
Jul 4 '18 at 6:26
add a comment |
1
I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
– Brian Bauman
Jul 4 '18 at 3:58
Glad I could help
– Lasitha Yapa
Jul 4 '18 at 6:26
1
1
I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
– Brian Bauman
Jul 4 '18 at 3:58
I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
– Brian Bauman
Jul 4 '18 at 3:58
Glad I could help
– Lasitha Yapa
Jul 4 '18 at 6:26
Glad I could help
– Lasitha Yapa
Jul 4 '18 at 6:26
add a comment |
-1
Try this
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item.text" placeholder="item.text">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item.text</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
constructor()
ngOnInit()
edited Jan 14 at 21:31
Simone Nigro
2,62621746
answered Dec 30 '18 at 15:27
VickyVicky
494
Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
– Suyash Gulati
Mar 27 at 14:03
add a comment |
-1
Try this
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item.text" placeholder="item.text">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item.text</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
constructor()
ngOnInit()
edited Jan 14 at 21:31
Simone Nigro
2,62621746
answered Dec 30 '18 at 15:27
VickyVicky
494
Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
– Suyash Gulati
Mar 27 at 14:03
add a comment |
-1
-1
-1
Try this
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item.text" placeholder="item.text">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item.text</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
constructor()
ngOnInit()
edited Jan 14 at 21:31
Simone Nigro
2,62621746
answered Dec 30 '18 at 15:27
VickyVicky
494
Try this
@Component(
selector: 'my-app',
template: `
<div>
<div *ngFor="let item of toDos;let index = index;">
<input [(ngModel)]="item.text" placeholder="item.text">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
<label>item.text</label>
</div>
</div>
`,
directives: [MdButton, MdInput]
)
export class AppComponent
toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
constructor()
ngOnInit()
edited Jan 14 at 21:31
Simone Nigro
2,62621746
answered Dec 30 '18 at 15:27
VickyVicky
494
edited Jan 14 at 21:31
Simone Nigro
2,62621746
edited Jan 14 at 21:31
Simone Nigro
2,62621746
edited Jan 14 at 21:31
Simone Nigro
2,62621746
2,62621746
answered Dec 30 '18 at 15:27
VickyVicky
494
answered Dec 30 '18 at 15:27
VickyVicky
494
answered Dec 30 '18 at 15:27
VickyVicky
494
494
Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
– Suyash Gulati
Mar 27 at 14:03
add a comment |
Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
– Suyash Gulati
Mar 27 at 14:03
Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
– Suyash Gulati
Mar 27 at 14:03
Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
– Suyash Gulati
Mar 27 at 14:03
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f40314732%2fangular-2-2-way-binding-with-ngmodel-in-ngfor%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
You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate?
– Ben Richards
Oct 29 '16 at 0:22
It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly.
– Ka Tech
Oct 29 '16 at 0:58
Just post an answer :-)
– Paul Samsotha
Oct 29 '16 at 1:36