Manipulate 1 FormControl with Multi Input Angular 2

Question

I have a list of object like this:

listSubject = [
{name: 'Math', lessonPerWeeks: 1},
{name: 'Lit', lessonPerWeeks: 2},
{name: 'Bio', lessonPerWeeks: 3},
{name: 'Phy', lessonPerWeeks: 7},
{name: 'Remains', lessonPerWeeks: 36},
];

I put them in a loop of input for changing values like this:

<div *ngFor="let subject of listSubject">
<input *ngIf="subject.name != 'Remains'" type="number" [(ngModel)]="subject.lessonsPerWeeks" [formControl]="changeValue">
<div *ngIf="subject.name === 'Remain'">
   {{subject.lessonPerWeeks}}
</div>
</div>

The FormControl: changeValue is used to detect the changes from input to recalculate the percent of each subject over totals:

this.changeValue
        .valueChanges
        .debounceTime(200)
        .subscribe(()=>{
          for(let i=0; i < this.listSubject.length;i++){
            let subject = this.listSubject[i];
            let lastSubject = this.listSubject[this.listSubject.length-1];
            subject.percentSem1 = subject.lessonPerWeeks/ this.totalLessonPerWeeks * 100;


            if(i === this.listSubject.length - 1){
              return;
            }
            else if(i === 0){
              lastSubject.lessonPerWeeks = 36; 

            }
            lastSubject.lessonPerWeeks -= subject.lessonPerWeeks;
          }

        });

Everything works fine except the initial display value in the Inputs. All inputs display the value of the last item on the list. In this case, the value of all inputs is 7 instead of different value. If I remove the [formControl] , all data display exactly Here is the screenshot: Multi Input display

I think my problem is use a FormControl for all the input. Please help me to solve this problem. Thank you

@Aravind: Thank you for your remind. I have added typescript tag, is it ok? — TheRemjx
– TheRemjx, Commented Mar 20, 2017 at 6:40
your post has ts code and the variables are not in the markup your screenshot looks different — Aravind
– Aravind, Commented Mar 20, 2017 at 6:41

Community · Accepted Answer · 2017-05-23 12:09:51Z

0

use name attribute as unique for each input. Otherwise input field which are in loop always display value of last item data.

<div *ngFor="let subject of listSubject; let i = index">
<input *ngIf="subject.name != 'Remains'" 
 type="number" name="field_{{i}}" 
 [(ngModel)]="subject.lessonsPerWeeks" [formControl]="changeValue">
<div *ngIf="subject.name === 'Remain'">
   {{subject.lessonPerWeeks}}
</div>
</div>

References are here :

angular2-ngmodel-inside-ngfor-data-not-binding-on-input

angular2-binding-of-name-attribute-in-input-elements-with-ngfor

dynamic-angular2-form-with-ngmodel-of-ngfor-elements

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 20, 2017 at 6:42

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheRemjx Over a year ago

Thank you, Ghosh. I have added name attribute like your answer. But It's still there. But if I move out the [formControl] all data display ok.

TheRemjx Over a year ago

Actually, I don't like to create different FormControl for each object in the list. But it's work perfect now. Thank you, Ghosh

TheRemjx · Accepted Answer · 2017-03-20 07:26:01Z

After read the @Partha Sarathi Ghosh answer and comment. I finally found the solution. I added a same FormControl for each object in the list then bind them in HTML. Typescript code:

this.listSubject.forEach((subject)=>{
      subject.changeValue = new FormControl();
      subject.changeValue
          .valueChanges
    .debounceTime(200)
    .subscribe(()=>{
      for(let i=0; i < this.listSubject.length;i++){
        let subject = this.listSubject[i];
        let lastSubject = this.listSubject[this.listSubject.length-1];
        subject.percentSem1 = subject.lessonPerWeeks/ this.totalLessonPerWeeks * 100;


        if(i === this.listSubject.length - 1){
          return;
        }
        else if(i === 0){
          lastSubject.lessonPerWeeks = 36; 

        }
        lastSubject.lessonPerWeeks -= subject.lessonPerWeeks;
      }

    });}

And the HTML

<div *ngFor="let subject of listSubject">
<input *ngIf="subject.name != 'Remains'" type="number" [(ngModel)]="subject.lessonsPerWeeks" [formControl]="subject.changeValue">
<div *ngIf="subject.name === 'Remain'">
   {{subject.lessonPerWeeks}}
</div>
</div>

However, is there any better solution?

Collectives™ on Stack Overflow

Manipulate 1 FormControl with Multi Input Angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related