Angular 2 | NgformControl Prevents my NgModel from updating


This is my code:


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

and my mainTS:

class {
    inputField = new Control();

    constructor( private _broadcastService : BroadcastService) {
           .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


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

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


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.