在Angular2中将管道添加到formControlName

如果您有许多带有订阅的表单控件,可能有一些最佳实践可以找到有关清理订阅和提高效率的方法.处理/提交最终表单值时,您还可以清除任何不需要的管道转换.

基本示例(另请参阅：original source)：

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

原创方法……

This answer描述了如何为输入字段创建自定义控件值访问器,该字段在onChange(获取convertTo *自定义函数)和writeValue(获取convertFrom自定义函数)方法中插入自定义时间戳转换函数.

您可能会创建类似的东西(例如,将模板等调整为其他表单输入类型),但用您想要的管道变换方法(可能是两种不同的类型)替换转换函数,以实现您的目标.角度文档或源代码可能有助于进一步的细节.

我看到的另一个建议的方法是在初始表单控件创建期间使用管道,但这似乎不太有用,因为它不会继续应用这些更改,因为用户更改了输入值.它最初会正确显示,但任何操作都会丢失变换过滤,并且表单将按原样提交,而不应用管道变换.