Parsers и Formatters в Angular2

Как сделать парсеры и форматирования в Angular2?

в Angular1 можно было делать такие манипуляции с помощью ngModelController:

//model -> view
ngModelController.$formatters.push(function(modelValue) {
  return modelValue.toUpperCase();
});

//view -> model
ngModelController.$parsers.push(function(viewValue) {
  return viewValue.toLowerCase();
});

Можете ли вы предоставить мне пример, как это сделать с помощью Angular2?

UPD: Трубы похожи на Фильтры в Angular1, но я ищу не фильтры, а для Parsers и Formatters для ngModel. Так что "Трубы" - неправильный ответ.

ОТВЕТЫ

Ответ 1

Можете ли вы предоставить мне пример, как это сделать с помощью Angular2?

                      a.) model → view

  1> Использование Pipes

TS:

myString: string = "ABCDEFGH";

Шаблон:

{{myString | lowercase}}

Вывод:

abcdefgh

  2> Прямое преобразование

Шаблон:

Below Input field will have lowercase string as value

<input type="text" [value]="myString.toLowerCase()">

I'm also lowercase:  {{myString.toLowerCase()}}

Вывод:

Input field with value "abcdefgh"

I'm also lowercase:  abcdefgh

  3> Использование Getter/Setter

TS:

myString: string = "ABCDEFGH";

get stillMyString() {
  return this.myString.toLowerCase();
}
set stillMyString(v) {
  this.myString = v;
}

Шаблон:

{{stillMyString}}

Вывод:

abcdefgh

  4> Использование Directives

  5> Использование ControlValueAccessor

  & strong > ИЛИ используя комбинацию любого из вышеперечисленных

                      б) вид → модель

  1> Использование Вывод/События

Шаблон:

Below Input field will get lowercase string as value but will store uppercase string

<input type="text" [value]="myString.toLowerCase()" (change)="myString = $event.toUpperCase()">

I'm give uppercase values automatically:  {{myString}}

Вывод:

Input field with initial value "abcdefgh"

I'm given uppercase values automatically:  ABCDEFGH

  2> Использование Setter/Getter

TS:

myString: string = "ABCDEFGH";

get stillMyString() {
  return this.myString;
}
set stillMyString(s) {
  this.myString = s.toUpperCase();
}

Шаблон:

Below Input field will get lowercase string as value but will store uppercase string

<input type="text" [value]="stillMyString.toLowerCase()" (change)="myString = $event">

Now I'm Uppercase:  {{stillMyString}}

Вывод:

Input field with initial value "abcdefgh"

I'm given uppercase values automatically:  ABCDEFGH

И/ИЛИ комбинация вышеописанных методов и любого другого метода, о котором я не могу сейчас думать.

                      Обертка UP

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

  • Проверка не связана с преобразованием, но вы можете сделать это, улучшив getter/setters и используя FormControl в своих полях ввода

  • Я мог бы просто показать вам tip of the iceberg здесь, есть так много преобразований model <> view, потому что используется то, что Angular делает, Data Binding, one way or two way.

Надеюсь, что это поможет:)

Ответ 2

В моем случае не существует такой концепции форматировщиков или парсеров в Angular 2, но вы можете реализовать ее, используя следующий код, очень простой

В HTML

 <input type="text"  [ngModel] = "formatter(ex)"  (ngModelChange)="parser($event)">

в коде

export class Component{
     data:string = 'data';
     constructor(){}

     formatter(value){
        value = value.toUpperCase();   //manipulate the data according to your need
        return value;
     }

     parser(value){
         this.data = value.toLowerCase();  //manipulate the data according to your need
     }



}

вы также можете реализовать массив функций в соответствии с вашей потребностью в полной мере реализовать $formatters и $parsers.

Ответ 3

Согласно официальной документации angular 2, трубы переименованы в angular 1 фильтр. Вы не используете фильтры в angular 1 для преобразования viewModel в модель и наоборот. В основном вы используете фильтры для фильтрации или форматирования данных для шаблонов, а не для двусторонней передачи данных.

Я никогда не работал с Angular1 и не знаю, как там работает.

Я думаю, что вы ищете ControlValueAccessor, что делает пользовательские компоненты работать с формами ngModel и Angular2 и позволяет сопоставлять между отображением и форматом модели значения.

Пример плунжера из https://github.com/angular/angular/issues/10251#issuecomment-238737954

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

Plunker также не использует теперь требуемый NgModule, но должен быть достаточно легким для переноса (я буду иметь другой взгляд позже)

И как валидация относится к трубам? Если смена пользователя недействительна, будет ли она в любом случае связана с каналами? Это вряд ли будет желать.

Валидация вообще не относится к трубам.

Я хочу видеть пользовательский компонент с проверкой. Компонент должен иметь различное представление для редактируемого пользователем значения и другое представление для значения модели, которое передается вне компонента.

Компонент Address выше также реализует пользовательскую проверку

Из комментария в https://github.com/angular/angular/issues/10251#issuecomment-238737954

Добавление проверки имеет аналогичный процесс для доступа к аксессуарам. Вы реализуете интерфейс валидатора (только функцию validate()) и предоставляете его как NG_VALIDATOR для своего настраиваемого элемента управления формой. Вот пример:

См. также

Ответ 5

Согласно официальному документу Angular 2

В Angular 1 вы пишете код, который предоставляет модель и методы представления в контроллере. В Angular 2 вы создаете компонент.

Смотрите здесь: https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html#!#controllers-components

согласно моему опыту, вы можете использовать Angular 2 Компоненты, Службы и Трубу для выполнения вышеуказанной задачи.

Я нашел 2 ссылки Github,

https://github.com/angular/angular/issues/6174

https://github.com/angular/angular/issues/3009

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

Angular 2 пользовательских ввода формы