Angular 4, привязка входного значения, не изменяется в пользовательском интерфейсе - PullRequest
Новая
       29

Angular 4, привязка входного значения, не изменяется в пользовательском интерфейсе

0 голосов
/ 21 мая 2018

У меня проблемы с привязкой ввода к значению в угловых 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 переменные, которые могут быть нулевыми.Они указывают минимальное и максимальное значения для диапазона.Если они нулевые, это означает, что нет минимального или максимального значения.

У меня также есть inputFrom и inputTo, которые связаны с html-входами.

Я звоню onInputFromChanged или onInputToChanged работает, когда вход теряет фокус.

Я хочу, чтобы здесь произошло , чтобы проверить входное значение, и, если оно недопустимо, заполните его допустимым значением.

Что действительно происходит - это то, что функции (onInputFromChanged или onInputToChanged) вызываются, затем inputFrom или inputTo изменяются, но в браузере , в большинстве случаев старое значениеосталось. 

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 в значение, а не пустую строку.

1 Ответ

0 голосов
/ 21 мая 2018

Попробуйте это

Работает при изменении входного значения. 

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"/>
...