通过单击单独的按钮来增加表单控件值
Increment form control Value by clicking a separate button
我试图通过单击两个单独的按钮来增加或减少表单控件的值。但不知何故,这些变化没有检测到,每次点击增加或减少按钮时,我都会得到相同的旧值。
输入类型是数字,我试图通过 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;
}
以下是您当前尝试遇到的问题:
- 增加容量
后,您不会保存这些值
- 在模板中递增表示为 - 反之亦然表示递减
.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>
我试图通过单击两个单独的按钮来增加或减少表单控件的值。但不知何故,这些变化没有检测到,每次点击增加或减少按钮时,我都会得到相同的旧值。
输入类型是数字,我试图通过 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;
}
以下是您当前尝试遇到的问题:
- 增加容量 后,您不会保存这些值
- 在模板中递增表示为 - 反之亦然表示递减
.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>