两个输入字段表示一个事件.目标值(以角度表示)

Question

我有两个输入字段，它们引用同一个event.target.value对象。我想把它们分开。

<form
class="flex-list"
[formGroup]="calculation_Input"
(input)="input($event)"
>
<div class="range-slider">
<input
id="slider3"
class="range-slider__range"
type="range"
value.equity="equity"
min="0"
max="500"
/>
<span class="range-slider__value"> 0</span>
</div>
<div class="range-slider">
<input
id="slider3"
class="range-slider__range"
type="range"
value.equity="equity"
min="0"
max="500"
/>
<span class="range-slider__value"> 0</span>
</div>
</form>

event.target.value现在指的是两个输入，我不知道如何更改它。

input(e: any): void {
console.log(event.target.value)
}

Answer 1

你可以试试这个：

<form
class="flex-list"
[formGroup]="calculation_Input"
(input)="input(&event)"

>
<div class="range-slider">
<input
id="slider3"
name="in1"
class="range-slider__range"
type="range"
value.equity="equity"
min="0"
max="500"
/>
<span class="range-slider__value"> 0</span>
</div>
<div class="range-slider">
<input
id="slider3"
class="range-slider__range"
type="range"
name="in2"
value.equity="equity"
min="0"
max="500"
/>
<span class="range-slider__value"> 0</span>
</div>
</form>

事件调用：

input(e: any): void {
if(e.target.name == "in1")
console.log("for fist input value is : " + event.target.value)
else console.log("for second input value is : " + event.target.value)
}

Answer 2

尝试在每个输入上使用[formControl]属性，然后可以使用valueChanges并订阅。

<form
class="flex-list"
[formGroup]="calculation_Input"
>
<div class="range-slider">
<input
id="inputRangeStart"
[formControl]="inputRangeStart"
class="range-slider__range"
type="range"
value.equity="equity"
min="0"
max="500"
/>
<span class="range-slider__value"> 0</span>
</div>
<div class="range-slider">
<input
id="inputRangeEnd"
class="range-slider__range"
type="range"
[formControl]="inputRangeEnd"
value.equity="equity"
min="0"
max="500"
/>
<span class="range-slider__value"> 0</span>
</div>
</form>

事件电话：//some.component.ts

inputRangeStart = new FormControl();
inputRangeEnd = new FormControl();
ngOnInit(): void {
this.inputRangeStart.valueChanges.subscribe(value => this.onInput(value))
this.inputRangeEnd.valueChanges.subscribe(value => this.onInput(value))
}
onInput(value: string){
// do something
}