在Angular2中将管道添加到formControlName

Posted 2023-03-13

【中文标题】在Angular2中将管道添加到formControlName

【英文标题】：Add pipe to formControlName in Angular2

【发布时间】：2017-02-28 12:24:45

【问题描述】：

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

【问题讨论】：

我从未尝试过，但尝试将其括在括号中，以便评估 [formControlName]。 formControlName 也不能替代 ngModel。看起来您正试图将其用作价值持有者。这只是表单控件的名称。 ngModel 可以与 formControlName 一起使用来保存模型值。

如果您使用绑定而不是硬编码字符串，那么您需要[] 或

我也遇到了这个问题，你可以看看这个，希望对你有帮助。 Angular - Use pipes in services and components

谁能帮忙，我谷歌搜索了一个小时，但没有找到解决方案！提前致谢！

【参考方案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 自定义函数）方法中插入自定义时间戳转换函数。

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

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