Angular - Входное значение [значение], привязанное к элементу управления формы, не обновляется один раз со значением элемента управления формы - PullRequest
Новая
       3

Angular - Входное значение [значение], привязанное к элементу управления формы, не обновляется один раз со значением элемента управления формы

0 голосов
/ 04 марта 2020

В подходе с реактивной формой у меня есть ползунок, с которым связан элемент управления формой. Когда ползунок перемещается, значение элемента управления формы обновляется. У меня также есть поле ввода рядом с ползунком, которое показывает значение ползунка, и я также могу обновить его, набрав. 

<input type="number" class="form-control" id="{{feature.name}}-input"
                [min]="0" [max]="100" [step]="1"
                (change)="onInputChange($event, feature)" [value]="featuresForm.get(feature.name)?.value.value">

И у меня есть следующий метод onInputChange, который обновляет значение элемента управления формы, когда пользователь изменяет ввод: 

onInputChange(event: any, feature: any) {
const input = this.featuresForm.get(feature.name);

if (event.target.value > 100) {
  input?.setValue({ value: 100 });
  return;
}
if (event.target.value < 0) {
  input?.setValue({ value: 0 });
  return;
}

input?.setValue({ value: event.target.value });
  }

Все работает нормально, если я ввожу значение в диапазоне от 0 до 100, но что-то странное происходит, если я ввожу значения вне этого диапазона.

Например:

  1. Вход 105 - значение входа сбрасывается на 100
  2. Вход 110 - значение входа остается равным 110 (или любому другому значению, которое вы вводите более 100), оно больше не сбрасывается
  3. Ввод 50 - значение ввода сбрасывается до 50, все работает как ожидалось

Я думаю, что при последовательном выполнении input?.setValue({ value: 100 });, ввод 105 и затем 110, форма не обнаружит изменить, и поэтому он не будет обновлять [value]="featuresForm.get(feature.name)?.value.value". Есть ли способ это исправить?

Редактировать: URL-адрес Stackblitz: https://stackblitz.com/edit/angular-yb2vgj

Предположим, что первым входом будет ползунок, который имеет тип ввода 

new FormControl({value: 24}), and not new FormControl(24)

С помощью кода, который присутствует там, и с сценарием, опубликованным выше, я хотел бы понять, почему второй вход не обновляется должным образом после 2 последовательных входов более 100.

1 Ответ

0 голосов
/ 04 марта 2020

Мы можем решить это с помощью множества хаков, пожалуйста, найдите код ниже. Вы можете создать другое свойство, которое будет отслеживать форму ввода. Мы также можем использовать это свойство для обновления значения элемента управления формы ползунка.

Надеюсь, это поможет, иначе я рекомендую вам создать экземпляр stackblitz. 

myInputValue = 0;
onInputChange(event: any, feature: any) {
  const input = this.featuresForm.get(feature.name);

  this.myInputValue = (event.target.value > 100) ? 100 :
    (event.target.value < 0)? 0:
    event.target.value;

  input ? .setValue({
    value: this.myInputValue;
  });
}
<input type="number" class="form-control" id="{{feature.name}}-input" [min]="0" [max]="100" [step]="1" (change)="onInputChange($event, feature)" [value]="myInputValue">

Вы также можете использовать setTimeout для принудительного запуска обнаружения изменений. 

onInputChange(event: any) {
    debugger;
    if (event.target.value > 100) {
      setTimeout(() => {
        this.featuresForm.get('slider').setValue(100)
        return;
      })
    }
    if (event.target.value < 0) {
      setTimeout(() => {
        this.featuresForm.get('slider').setValue(0)
      return;
      })
    }

    this.featuresForm.get('slider').setValue( event.target.value )
  }
...