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中的过滤器类似，但我不是在寻找过滤器，而是在寻找ngModel的解析器和格式化程序。所以“管道”不是正确的答案。

在Angular2中使用管道。 见文件：

你能给我举个如何使用Angular2的例子吗

a.）模型->视图

---

1>

使用 TS:

myString:string=“ABCDEFGH”； 模板：

{{myString}小写}

输出：

abcdefgh

---

2>

直接使用转换 模板：

下面的输入字段将使用小写字符串作为值
我也是小写：{{myString.toLowerCase（）}

输出：

值为“abcdefgh”的输入字段
我也是小写：abcdefgh

---

3>

使用Getter/Setter TS:

myString:string=“ABCDEFGH”； 获取stillMyString（）{ 返回this.myString.toLowerCase（）； } 设置stillMyString（v）{ this.myString=v； } 模板：

{{stillMyString}

输出：

abcdefgh

---

4>

使用

---

5>

使用

---

或使用上述任一项的组合

---

b.）视图->模型

---

1>

使用 模板：

下面的输入字段将以小写字符串作为值，但将存储大写字符串
我将自动给出大写值：{{myString}

输出：

初始值为“abcdefgh”的输入字段
我会自动获得大写值：ABCDEFGH

---

2>

使用Setter/Getter TS:

myString:string=“ABCDEFGH”； 获取stillMyString（）{ 返回此.myString； } 设置stillMyString（s）{ this.myString=s.toUpperCase（）； } 模板：

下面的输入字段将以小写字符串作为值，但将存储大写字符串
现在我是大写：{{stillMyString}

输出：

初始值为“abcdefgh”的输入字段
我会自动获得大写值：ABCDEFGH

---

和/或上述方法与我目前无法想到的任何其他方法的组合。

---

收尾

• 正如你所见，做同一件事有多种方法，这取决于你的需要和选择

• 验证不是转换的问题，但是您可以通过改进

  getter/setters

  并在输入字段上使用

  FormControl

  来实现

• 我可以在这里向您展示

  冰山一角

  ，

  模型视图

  转换有很多，因为这就是

  角度

  所做的，

  数据绑定

  ，

  单向或双向

希望有帮助：）

---

根据angular 2官方文档，管道重命名为angular 1过滤器。在angular 1中不使用过滤器将viewModel转换为模型，反之亦然。大多数情况下，您使用过滤器为模板过滤或格式化数据，而不是双向数据传递

我从未与Angular1合作过，也不知道那里的东西是如何运作的

我认为您需要的是

ControlValueAccessor

，它可以使自定义组件与

ngModel

和Angular2表单一起工作，并允许在值的显示格式和模型格式之间进行映射

从

这是一个比您的问题更复杂的示例，其中组件包含一个子表单。组件也可以是表单控件

Plunker还没有使用现在需要的

NgModule

，但是应该很容易迁移（我稍后会再看一看）

验证与管道有什么关系？如果用户更改无效，是否仍将通过管道进行更改？这几乎不是我们想要的

验证根本与管道无关

我想查看带有验证的自定义组件。对于用户可编辑的值，组件应有不同的表示形式，对于传递到组件外部的模型值，组件应有不同的表示形式

上面的

地址

组件也实现了自定义验证

来自

添加验证的过程与值访问器类似。您实现了validator接口（只是一个validate（）函数），并将其作为自定义表单控件上的NG_验证器提供。下面是一个例子：

另见

---

据我所知，Angular 2中没有格式化程序或解析器的概念，但您可以使用以下代码实现它，非常简单
在HTML中

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

您还可以根据需要实现一系列函数，以完全实现$formatters和$parser。
方法

writeValue（val:T）

和

updateChanges

是您的解析器和格式化程序
在ng2+中更重（老实说，取自ng9项目）看看ngModel扩展，下面是简短的monster示例（不可运行-堆栈溢出不支持ng2+）：

从'@angular/core'导入{Component，forwardRef，Input}；
进口{NG_VALU
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
     }



}