5

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

4

1 回答 1

1

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

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

基本示例（另见：原始来源）：

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

原始方法...

此答案描述了如何为输入字段创建自定义控件值访问器，该访问器在 onChange（获取 convertTo* 自定义函数）和 writeValue（获取 convertFrom 自定义函数）方法中插入自定义时间戳转换函数。

您可能会创建类似的东西（例如，使模板等适应其他表单输入类型），但用您想要的管道转换方法（可能是两种不同的类型）替换转换函数以实现您所追求的。Angular 文档或源代码可能有助于了解更多详细信息。

我看到的另一种建议方法涉及在初始表单控件创建期间使用管道，但这似乎不是很有用，因为当用户更改输入值时，它不会继续应用这些更改。一开始它会正确显示，但任何操作都会丢失转换过滤，并且表单将简单地按原样提交，而不应用管道转换。

于 2018-03-15T02:27:56.643 回答