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 !

Answer 1

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}}