Angular 6 - change value in one input changes values in multiple inputs

Question

I am still learning basic of angular 6 and typescripts and I am not sure how to make this work. I have one field, if user put some number value there (for example "100"), values in other inputs should change. I am pretty sure that I should use debounceTime and 'rxjs' like in this tutorial: https://angular.io/tutorial/toh-pt6, but I can't figure it out how to make this work.

If user put '100' in "how much" field, Tomek's and Magda's field values should change to '50' (100 / 2)

expense-shared.component.html

<div class="form-group">
  <label for="name">How much?</label>
  <input type="text" class="form-control" id="amount" required 
  [(ngModel)]="expense.amount" (keyup)="changeListValues(expense.amount)"
  name="amount" #amount="ngModel" placeholder="Amount in EUR">
  <div [hidden]="amount.valid || amount.pristine" class="alert alert-danger">
    Amount is required
  </div>
</div>

expense-shared.component.ts

@Input() amountList: Equally[];

changeListValues(expenseTotalAmount: number) {
        const checkedAmount = this.amountList.filter(x => x.checked).length;

        this.amountList.filter(x => x.checked).forEach(element => {
          element.quantity = this.expense.amount / checkedAmount;
        });
      }

To make it work, I will need to put there entire project so no I can't put it inside stackblitz :) Problem is clear you have one field if you change value there other two inputs with text should change values based on value written in first field. — tzm
– tzm, Commented Jul 31, 2018 at 6:47
@Chellappan I forked your example and changed app.component.html to show what I really want to do. I also put some comment on 'changeListValues' method inside app.component.ts. Here is the link: stackblitz.com/edit/angular-8zyvd2 — tzm
– tzm, Commented Jul 31, 2018 at 8:42

Anjana Silva · Accepted Answer · 2019-02-06 12:08:42Z

2

Additional Information - Using Observables to handle input changes

If anyone comes here and wants to handle input changes using Observable, this is how you do.

Assume we have following form (html),

<form [formGroup]="heroForm">
  <label>
    Name 1:
    <input type="text" formControlName="name1" required>
  </label> 
</form>

If you need to handle input changes for name1 using Observable, this is how you do in your component.ts file.

ngOnInit() {    
    this.logNameChange();
}

logNameChange() {
   const nameControl = this.heroForm.get('name1');
   nameControl.valueChanges.forEach(
      (value: string) => console.log(value)
   );
}

The above will log the typed value in the console.

StackBlitz example :- https://stackblitz.com/edit/angular7-input-change-observable?file=src/app/app.component.ts

Link to Angular Document :- https://angular.io/guide/observables-in-angular#reactive-forms

Hope this will help someone.

Cheers!

answered Feb 6, 2019 at 12:08

Anjana Silva

9,3514 gold badges57 silver badges59 bronze badges

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

2 Comments

tzm Over a year ago

Thanks for contribution! Do you know how to solve exactly this problem. You have n participants (n fields, for ex. 3 participants), one main field where user write some number (for ex. 99) and now application should divide this number by n participants (so 99 / 3 = 33) and put this divided value (33) into n participant fields. All this logic should be done in real time, so after the value change on the main input.

Anjana Silva Over a year ago

Dear @tzm, you are welcome. I will have a look when I get some time. However, is it not just the logic which needs to be changed to achieve exactly what you are looking for? Princiles remains the same. Thanks once again. Have a nice day. Anjana

Collectives™ on Stack Overflow

Angular 6 - change value in one input changes values in multiple inputs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related