Как добавить значения в поле ввода, используя машинопись - PullRequest
Новая
       45

Как добавить значения в поле ввода, используя машинопись

0 голосов
/ 02 мая 2020

enter image description here

Я хочу добавить значения apple, orange и man go, а затем получить общее значение. ниже приведен код, который я попробовал. 

  <div class="row col-12 " ngModelGroup="cntMap">
    <div class="form-group col-6">
        <label for="total">Total</label>
        <div class="clearfix">
          <input type="text" value="{{totalCount}}" class="form-control"
             name="totalCnt" [maxlength]="30" placeholder="Total" #totalCnt="ngModel" ngModel 
             [(ngModel)]="form.totalCnt">
        </div>
     </div>
     <div class="form-group col-6 ml-auto">
      <label for="APPLE">Apple</label>
      <div class="clearfix">
        <input type="text" class="form-control" name="APPLE" [maxlength]="30" placeholder="Enter" 
          #APPLE="ngModel" ngModel [(ngModel)]="form.APPLE" (change)="getCount($event)">
      </div>
     </div>
     <div class="form-group col-6 ml-auto">
      <label for="ORANGE">Orange</label>
      <div class="clearfix">
        <input type="text" class="form-control" name="ORANGE" [maxlength]="30" placeholder="Enter" 
          #ORANGE="ngModel" ngModel [(ngModel)]="form.ORANGE" (change)="getCount($event)">
      </div>
     </div>
     <div class="form-group col-6 ml-auto">
      <label for="MANGO">Mango</label>
      <div class="clearfix">
        <input type="text" class="form-control" name="MANGO" [maxlength]="30" placeholder="Enter" 
          #MANGO="ngModel" ngModel [(ngModel)]="form.MANGO" (change)="getCount($event)">
      </div>
     </div>
  </div>

В файле component.ts 

  getCount(event: any) {
    var c = event.target.value;
    this.totalCount += parseInt(c);
    console.log("totalCount ", this.totalCount );
  }

Проблема:

Когда я добавляю значение на входе добавляется счетчик: 10 + 10 + 10 = 30

После этого, когда я изменяю значение Apple с 10 на 8, общее значение равно: 10 + 10 + 10 + 8 = 38 Это означает, что без очистки данных из поля ввода добавляется значение 8.

Может кто-нибудь помочь мне решить эту проблему.

1 Ответ

0 голосов
/ 02 мая 2020

Поток, который происходит в данный момент, корректен, так как getCount() добавляет новое значение к существующему общему количеству.

Вместо этого вы должны делать каждое событие изменения, повторно добавлять значения из всех три поля ввода. 

getCount(event: any) {
  this.totalCount = parseInt(this.form.APPLE) + parseInt(this.form.ORANGE) + parseInt(this.form.MANGO);
  console.log("totalCount ", this.totalCount );
}
...