Увеличение значения элемента управления формы нажатием отдельной кнопки - PullRequest
Новая
       8

Увеличение значения элемента управления формы нажатием отдельной кнопки

1 голос
/ 24 марта 2020

Я пытаюсь увеличить или уменьшить значение элемента управления формы, нажимая на две отдельные кнопки. Но почему-то изменения не обнаруживаются, и я получаю одно и то же старое значение каждый раз, когда нажимаю кнопку увеличения или уменьшения.

Тип ввода - число, и я пытаюсь скрыть кнопку увеличения и уменьшения по умолчанию на CSS и мои пользовательские кнопки будут управлять этими частями. Поскольку я новичок в angular, поэтому я не очень понимаю, какую ошибку я совершаю. 

<div>
  <input type="number" formControlName="capacity">
  <button (click)="increament()">-</button>
  <button (click)="decreament()">+</button>
</div>


ngOnInit() {
    this.settingForm = this.fb.group({
      capacity: new FormControl(1, [
        Validators.required,
        Validators.min(1),
        Validators.max(5)
      ])
    })
  }


increament(){
  this.settingForm.get('capacity').value +1;
}

decreament(){
  this.settingForm.get('capacity').value -1;
}

1 Ответ

1 голос
/ 24 марта 2020

Вот проблемы с вашей текущей попыткой:

  1. Вы не сохраняете значения после увеличения емкость
  2. В шаблоне приращение было обозначено как - и наоборот для декремента

.ts 

increament() {
  this.settingForm.setValue({
    capacity: this.settingForm.get("capacity").value + 1
  });
}

decreament() {
  this.settingForm.setValue({
    capacity: this.settingForm.get("capacity").value - 1
  });
}

. html

<form [formGroup]="settingForm">
    <input type="number" formControlName="capacity">
    <button (click)="increament()">+</button>
    <button (click)="decreament()">-</button>
</form>
...