Angular 5 - привязать два поля к одной переменной экземпляра

Question

Для начала я использую Angular версии 5.2.11

В моем компоненте временная метка хранится как переменная экземпляра строки.

Мне нужно связать эту строку с формой для обновления конечным пользователем. Обычно я бы создал форму на основе шаблона для обновления строки; но в этом случае мне нужно, чтобы часть даты временной метки была представлена ​​в пользовательском интерфейсе формы в качестве поля ввода текста, а часть времени временной метки должна быть представлена ​​в пользовательском интерфейсе формы в качестве поля выбора параметров (с дискретным набором доступных значений времени на выбор).

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

У меня почти нет идей ... Кто-нибудь знает какие-нибудь рабочие примеры метки времени (или любого другого значения), которая использует два поля ввода?

Answer 1

Вы можете определить два свойства getter / setter, по одному для каждой части переменной timestamp:

private timestamp: string;

public get datePart(): string {
  // Extract the date part of this.timestamp
  return ...
}
public set datePart(value: string) {
  // Set the date part of this.timestamp
  ...
}

public get timePart(): string {
  // Extract the time part of this.timestamp
  return ... 
}
public set timePart(value: string) {
  // Set the time part of this.timestamp
  ...
}

В шаблоне вы можете привязать каждое свойство к элементу HTML:

<input type="text" name="date" [(ngModel)]="datePart" />

<select name="time" [(ngModel)]="timePart" >
  ...
</select>

См. этот стек для демонстрации. Обратите внимание, что более простой альтернативой было бы иметь две различные переменные, date и time, каждая из которых связана с элементом, и определить свойство timestamp getter для объединения двух частей.