Angular 通过单击单独的按钮来增加表单控制值

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

输入类型是number，我试图通过CSS隐藏默认的递增和递减按钮，我的自定义按钮将管理这些部分。因为我是个新手，所以我不知道我犯了什么错误

<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;
}

-
+
恩戈尼尼特（）{
this.settingForm=this.fb.group({
容量：新FormControl（1[
需要验证器，
验证器最小值（1），
验证程序。最大值（5）
])
})
}
增量（）{
this.settingForm.get（'capacity'）。值+1；
}
减量{
this.settingForm.get（'capacity'）.value-1；
}

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

一旦增加容量，就不会保存这些值

在模板中，增量表示为-反之亦然

.ts

.html

+
-

现在我又面临一个挑战。现在，我有两个表单控件，当我单击“增加”或“减少”按钮时，会得到第二个表单控件的验证错误。第二个表单控件是选择框，它是必填字段。每次我点击这些按钮时，选择框中所需的信息就会弹出。请为此创建一个单独的问题，并提供所有适当的详细信息，然后我们可以帮助您！

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

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

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