how - Analizadores y Formateadores en Angular2

img src angular 4

Question

¿Cuál es la forma de hacer analizadores y formateadores en Angular2?

en Angular1 fue posible realizar tales manipulaciones con ngModelController:

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

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

¿Podría darme un ejemplo de cómo hacerlo con Angular2?

UPD : Las tuberías son similares a los filtros en Angular1, pero no busco filtros, sino analizadores y formateadores para ngModel . Así que "Pipes" no es la respuesta correcta.

Answer 1

¿Podría darme un ejemplo de cómo hacerlo con Angular2?

a.) modelo -> vista

1> utilizando Pipes

TS:

myString: string = "ABCDEFGH";

Modelo:

{{myString | lowercase}}

Salida:

abcdefgh

2> Usando la transformación directamente

Modelo:

Below Input field will have lowercase string as value

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

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

Salida:

Input field with value "abcdefgh"

I''m also lowercase:  abcdefgh

3> Usando Getter / Setter

TS:

myString: string = "ABCDEFGH";

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

Modelo:

{{stillMyString}}

Salida:

abcdefgh

4> Usando Directives

5> Usando ControlValueAccessor

O usando una combinación de cualquiera de los anteriores

b.) ver -> modelo

1> Uso de Output/Events

Modelo:

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}}

Salida:

Input field with initial value "abcdefgh"

I''m given uppercase values automatically:  ABCDEFGH

2> Usando Setter / Getter

TS:

myString: string = "ABCDEFGH";

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

Modelo:

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}}

Salida:

Input field with initial value "abcdefgh"

I''m given uppercase values automatically:  ABCDEFGH

Y / O una combinación de los métodos anteriores y cualquier otro método que no pueda pensar en este momento.

Terminando

• Como puede ver, hay varias formas de hacer lo mismo, solo depende de su necesidad y elección para usar cualquiera de ellas.

• La validación no es la preocupación de la transformación, pero puede hacerlo mejorando los FormControl de FormControl getter/setters FormControl y utilizando FormControl en sus campos de entrada.

• Podría mostrarle la tip of the iceberg aquí, hay tanto para model <> view transformaciones de la model <> view , porque eso es lo que hace Angular , el Data Binding , de one way or two way .

Espero eso ayude :)

Answer 2

De acuerdo con la documentación oficial de angular 2, las tuberías se renombran como filtros de angular 1. No usa los filtros en angular 1 para convertir viewModel a modelo, y viceversa. Principalmente, usted usa filtros para filtrar o formatear datos para plantillas, no para el paso de datos bidireccionales.

Nunca he trabajado con Angular1 y no sé cómo funcionan las cosas allí.

Creo que lo que está buscando es ControlValueAccessor que hace que los componentes personalizados funcionen con los ngModel y Angular2 y les permite asignar el formato de visualización y modelo del valor.

Ejemplo de Plunker de https://github.com/angular/angular/issues/10251#issuecomment-238737954

Este es un ejemplo un poco más complejo de lo que podría ser su pregunta, cuando un componente contiene un formulario secundario. Un componente solo puede ser un control de forma también.

El Plunker tampoco usa el NgModule ahora se requiere, pero debería ser lo suficientemente fácil como para migrar (veré otra vez más a mí mismo)

¿Y cómo se relaciona la validación con las tuberías? Si el cambio de usuario no es válido, ¿se canalizará de todos modos? Eso no es lo que se quiere.

La validación no se relaciona con las tuberías en absoluto.

Quiero ver un componente personalizado con validación. El componente debe tener una representación diferente para el valor editable por el usuario y una representación diferente para el valor del modelo que se pasa fuera del componente.

El componente de Address anterior también implementa la validación personalizada

Del comentario en https://github.com/angular/angular/issues/10251#issuecomment-238737954

Agregar validación tiene un proceso similar para valorar los accesores. Usted implementa la interfaz del validador (solo una función validate ()) y la proporciona como un NG_VALIDATOR en su control de formulario personalizado. Aquí hay un ejemplo:

Ver también

• http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
• http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

Answer 3

En Angular2 utilizas tuberías. Consulte la documentación: Pipes

Answer 4

No existe tal concepto de formateadores o analizadores en Angular 2, pero puede implementarlo usando el siguiente código, es muy simple

En HTML

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

en codigo

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
     }



}

también puede implementar una serie de funciones de acuerdo con su necesidad de implementar $ formatters y $ parsers.