angular - 通过单击单独的按钮来增加表单控件值

Question

我试图通过单击两个单独的按钮来增加或减少表单控件的值。但不知何故，这些变化没有被检测到，每次点击增加或减少按钮时，我都会得到相同的旧值。

输入类型是数字，我试图通过 CSS 隐藏默认的递增和递减按钮，我的自定义按钮将管理这些部分。由于我是 Angular 的新手，所以我不太清楚自己犯了什么错误。

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


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


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

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

Answer 1

以下是您当前尝试的问题:

1. 一旦增加容量，您就不会保存这些值
2. 在模板中递增表示为 - 反之亦然表示递减

.ts

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

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

.html

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