Angular 5 - Strange behaviour with input text and ngModel

Question

Take this basic input

<form (submit)="input_button($event)">
        <input
            type="text"
            [(ngModel)]="input_text"
            name="code"/>
            <br/>

    <input
        type="submit"
        value="Ok"/>
    </form>
    {{input_text}}

with a simple string input_text in your component. It's working, good. Ths two-way data binding is working and you can see the value of you input bellow your button.

Now, replace input_text in your component with

input_text:Array<string> = ['A', 'B', 'C', 'D'];

And in your template try this :

<form (submit)="input_button($event)">
        <input
            *ngFor="let text of input_text; let i = index"
            type="text"
            [(ngModel)]="input_text[i]"
            name="code_{{i}}"/>
            <br/>

    <input
        type="submit"
        value="Ok"/>
    </form>
    {{input_text}}

You have 4 inputs, well initialisez (with the correct name). But when you try to put text in a field, you lost the focus and the input_text array is unchanged ( {{input_text}} show always the same array )

Replacing [(ngModel)]="input_text[i]" with [(ngModel)]="text" does nothing

Can someone explain what is happening here ?

Thanks a lot !

I think that automatic change detection cannot occur for elements of an array. As such, initialization goes ok, but it can't simply automatically h later You can have a look at these questions for how to force change detection in these cases : https://stackoverflow.com/questions/35748484/detect-changes-in-objects-inside-array-in-angular2/36268847#36268847 https://stackoverflow.com/questions/42962394/angular-2-how-to-detect-changes-in-an-array-input-property — Pac0, Jan 12 '18 at 15:27
I would suggest using Model Driven Forms, it will work a lot better for your scenario. but if you wanna using template driven then provide a plnkr — Nadhir Falta, Jan 12 '18 at 15:28
Have a look at [IterableDiffers](https://stackoverflow.com/questions/42962394/angular-2-how-to-detect-changes-in-an-array-input-property) — Pac0, Jan 12 '18 at 15:33
Try adding `trackBy` in your `ngFor` directive, as suggested in [this answer](https://stackoverflow.com/a/40315703/1009922), and as illustrated in [this plunker](http://plnkr.co/edit/ashLynsRblWWl7Adb4Wg?p=preview). — ConnorsFan, Jan 12 '18 at 15:34
i already tryed trackBy. I'm not losing focus but the input_text array is still unchanged — dc-p8, Jan 12 '18 at 15:36
[This plunker](http://plnkr.co/edit/RRu517yBiJ0vNhjK2ISn?p=preview) seems to work fine with `trackBy`. — ConnorsFan, Jan 12 '18 at 15:46

score 0 · Accepted Answer · answered Jan 12 '18 at 15:48

Try init in your component input_text: Array<object> = [{name: 'A'}, {name: 'B'}, {name: 'C'}, {name: 'D'}]; and run this code:

<form (submit)="input_button($event)">
    <input
        *ngFor="let text of input_text; let i = index"
        type="text"
        [(ngModel)]="input_text[i].name"
        name="code_{{i}}"/>
        <br/>

<input
    type="submit"
    value="Ok"/>
</form>
{{input_text | json}}

score 0 · Answer 2 · answered Jan 12 '18 at 15:52

0

Well, trackBy is working but {{input_text}} doesn't trigger because it's an object

Thanks all for help

answered Jan 12 '18 at 15:52

dc-p8

784
1
6
19

What do you mean by "doesn't trigger because it's an object"? It's not an array of strings? According to the code sample given in the question, the output should be OK, as shown in [this plunker](http://plnkr.co/edit/RRu517yBiJ0vNhjK2ISn?p=preview). – ConnorsFan Jan 12 '18 at 15:54
{{input_text}} show the initialised array but don't update. I thought it was not updated in the component but it is, it is just not updated on the template because input_text is an array – dc-p8 Jan 12 '18 at 16:31
OK, I found the difference between the plunker and your code. The plunker uses Angular 2 and displays the updated array with `{{ input_text }}`, but that does not work anymore in Angular 5. [This stackblitz](https://stackblitz.com/edit/angular-akbaj3) shows how to output the data in Angular 5: `
{{ item }}
`. – ConnorsFan Jan 12 '18 at 17:40

Angular 5 - Strange behaviour with input text and ngModel

2 Answers2