向 Angular 中的输入元素添加侦听器答案

【问题标题】：Add a listner to input element in Angular向 Angular 中的输入元素添加侦听器
【发布时间】：2021-10-14 14:52:24
【问题描述】：

我在下面发布了input 元素。我想知道如何将侦听器添加到inputelement，这样每次用户更改侦听器被调用的输入值并显示当前值选择了

HTML 模板

<div id="idDoseLabel1" class="date">
  <p>{{ "SITE.INSECTICIDES.DOSE_LABEL" | translate }}:</p>
</div>
<input id="idDoseValue1"
    [disabled] = "false"
    required
    placeholder=""
    maxlength="7" 
    clrInput
    type="number"
    name="doseValue"
    [(ngModel)]=iPesticidesDosesPasser.dose
    #name1="ngModel"/>

【问题讨论】：

能否格式化一下代码？

标签： javascript html css angular typescript

【解决方案1】：

您可以使用更改事件进行输入，如下所示：

<input id="idDoseValue1"
  [disabled] = "false"
  required
  (change) = "test()"
  placeholder=""
  maxlength="7" 
  clrInput
  type="number"
  name="doseValue"/>

【讨论】：

【解决方案2】：

您可以使用FormControl 来实现相同的目的。

HTML 代码：

<div id="idDoseLabel1" class="date">
    <p>{{ "SITE.INSECTICIDES.DOSE_LABEL" | translate }}:</p>
</div>
<input [disabled] = "false"
    [formControl]="doseControl"
    required
    placeholder=""
    maxlength="7" 
    clrInput
    type="number"
    name="doseValue"/>

TS 代码：

doseControl = new FormControl('');

ngOnInit() {
    this.doseControl.valueChanges.subscribe(value => {
        console.log(value);
    });
};

//to retreive value
this.doseControl.value;

//to set value
this.doseControl.setValue('new value');

【讨论】：

我完全同意

【解决方案3】：

您可以在输入元素上添加 onChange 事件，以便在值更改时立即。你可以这样做：

<input id="idDoseValue1" [disabled]="false" required placeholder="" maxlength="7" clrInput type="number" name="doseValue" [(ngModel)]=iPesticidesDosesPasser.dose #name1="ngModel" (change)="someFunction($event)"/>

在someFunction() 函数中，您可以从变量iPesticidesDosesPasser.dose 中获取值

【讨论】：