Angular 2 | NgformControl Prevents my NgModel from updating

Issue

This is my code:

HTML:

<div *ngFor="let reject of rejects, let i = index">
    <h2>{{reject.reason}}</h2>
    <input type="text" [(ngModel)]="reject.reason" [ngFormControl]="inputField">
    <rt-dropdown (selectedReason)="selectReason($event.value, i)"></rt-dropdown>
</div>

and my mainTS:

class {
    inputField = new Control();


    constructor( private _broadcastService : BroadcastService) {
        this.inputField.valueChanges
           .debounceTime(300)
           .subscribe(term => this._dropdownComponent.query(term));
    }
}



selectReason(text, index) {
 this.rejects[index].reason = text;
}

RT-dropdown only sends a reason when you click on a reason.

The problem is, that when you click on a reason, the {{reject.reason}} changes, but the input field does not change.

It’s like the page is not updating, anyone experience on this ?

Thank you

Solution

<div *ngFor="let reject of rejects let idx=index">
    <h2>{{reject.reason}}</h2>
    <input type="text" [(ngModel)]="rejects[idx].reason" [ngFormControl]="inputField">
    <rt-dropdown (selectedReason)="selectReason($event.value, i)"></rt-dropdown>
</div>

You also need as many inputField = new Control() (maybe an array of inputFields as you have entries in rejects and refer to them in

[ngFormControl]="inputFields[idx]"

Otherwise all input elements refer to the same Control instance.

Answered By – Günter Zöchbauer

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.