Question

我无法将输入绑定到角度4中的值，例如[value]="inputFrom"。有时它会在我更改inputFrom时更改，有时则不会更改。如何在inputFrom更改时始终更改输入，而不仅仅是有时？

你能否提出另一种方法来完成我想要做的事情？

让我解释一下我正在努力做的事情。我有两个输入：

<input [value]="inputFrom" type="number" [min]="inputMin" [max]="inputMax" (focusout)="onInputFromChanged($event.target.value)" />
<input [value]="inputTo"   type="number" [min]="inputMin" [max]="inputMax" (focusout)="onInputToChanged($event.target.value)" />

我有inputMin，inputMax个变量，可以为null。它们表示范围的最小值和最大值。如果它们为空，则表示没有最小值或最大值。

我还有inputFrom和inputTo，它们绑定到html输入。

当输入失去焦点时，我会调用onInputFromChanged或onInputToChanged个函数。

我想在这里发生的事情是验证输入值，如果它无效，请用有效值填充它。

实际发生的事情是调用函数（onInputFromChanged或onInputToChanged），然后更改inputFrom或inputTo，但< em>在浏览器中，大部分时间都是旧值。

export class AppComponent {
  inputMin = 100; // can be null
  inputMax = 200; // can be null
  inputFrom = 100;
  inputTo = 200;

  onInputFromChanged(valueStr: string): void {
    const value = Number(valueStr);
    if (this.inputMin != null && value < this.inputMin) {
      this.inputFrom = this.inputMin;
    }
  }

  onInputToChanged(valueStr: string): void {
    const value = Number(valueStr);
    if (this.inputMax != null && value > this.inputMax) {
      this.inputTo = this.inputMax;
    }
  }
}

我试过的其他事情：

我尝试过使用ngModel。它不会改变行为。
我尝试将oninput="validity.valid||(value='');"或onfocusout="validity.valid||(value='');"添加到我的输入元素中。但我需要的是将inputMin或inputMax放入值中，而不是空字符串。

Answer 1

试试这个

当输入值发生变化时，它会起作用。

export class AppComponent {

inputMin = 100; 
inputMax = 200; 
inputFrom = 100;
inputTo = 200;

handleInputChange(valueStr: string) { 
    const value = Number(valueStr);
    if (this.inputMax != null && value > this.inputMax) {
        this.inputTo = this.inputMax;
    }
    if (this.inputMin != null && value < this.inputMin) {
        this.inputFrom = this.inputMin;
    }
} 
}

<input [ngModel]="inputFrom"   type="number" [min]="inputMin" [max]="inputMax" (change)="handleInputChange($event.target.value)" (ngModelChange)="inputFrom = $event" />

<input [ngModel]="inputTo"  type="number" [min]="inputMin" [max]="inputMax" (change)="handleInputChange($event.target.value)" (ngModelChange)="inputTo = $event"/>

Angular 4，输入值绑定，在UI中不会改变

1 个答案: