Добавить канал в formControlName в Angular2

Я ищу, чтобы добавить номер трубы в поле ввода в Angular2. Я использую управляемые моделями формы, и все мои входные данные имеют formControlName вместо привязки данных. Проблема у меня есть formControlName="number | number : '1.2-2'" недопустимый код. Выдает ошибку о том, что formControlName не может быть найден. Я не хочу удалять formControlName вместо ngModel, потому что я подписываюсь на входные данные формы для проверки, когда форма используется.

1 ответ

ОБНОВЛЕНИЕ: я понял, что более простой, более разумный подход использует valueChanges для выполнения setValue с конвейерным преобразованием значения события изменения.

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

Базовый пример (см. Также: первоисточник):

ngOnInit() {
  this.searchField = new FormControl();
  this.searchField.valueChanges
      .subscribe(val => {
        this.searchField.setValue(myPipe.transform(val))
      });
}

Выдержка с задержкой отклика + проверка четкости:

this.searchField.valueChanges
    .debounceTime(400)
    .distinctUntilChanged()
    .subscribe(term => {
      this.searchField.setValue(myPipe.transform(val))
  });

Оригинальный подход...

В этом ответе описывается, как создать пользовательский метод доступа к значению элемента управления для поля ввода, в которое вставляются настраиваемые функции преобразования меток времени внутри методов onChange (который получает пользовательскую функцию convertTo *) и writeValue (который получает пользовательскую функцию convertFrom).

Скорее всего, вы создадите нечто подобное (например, адаптируете шаблон и т. Д. К другим типам ввода формы), но замените функции преобразования желаемыми методами преобразования Pipe (возможно, двух разных типов), чтобы добиться того, чего вы хотите. Угловая документация или исходный код могут быть полезны для получения дополнительной информации

Другой предложенный мной подход заключается в использовании канала во время первоначального создания элемента управления формой, но он не кажется очень полезным, поскольку он не будет продолжать применять эти изменения при изменении пользователем входного значения. Сначала он будет отображаться правильно, но любая манипуляция потеряет фильтрацию преобразования, и форма будет просто отправлена ​​как есть без применения преобразования канала.

Другие вопросы по тегам