Question

我希望在Angular2的输入字段中添加一个数字管道。我正在使用模型驱动的表单，我的所有输入都有一个formControlName而不是使用数据绑定。我遇到的问题是formControlName="number | number : '1.2-2'"不是有效的代码。它会抛出一个错误，指出无法找到formControlName。我不想删除formControlName来代替ngModel，因为我正在订阅表单输入以在使用表单时进行验证。

Answer 1

更新：我意识到一种更简单，更明智的方法是使用valueChanges来对变更事件值执行管道变换来执行setValue。

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

基本示例（另请参阅：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自定义函数）方法中插入自定义时间戳转换函数

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

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

在Angular2中将管道添加到formControlName

1 个答案: