gpt4 book ai didi

angular - 将管道添加到 Angular2 中的 formControlName

转载 作者:太空狗 更新时间:2023-10-29 17:39:40 26 4
gpt4 key购买 nike

我希望将数字管道添加到 Angular2 中的输入字段。我正在使用模型驱动的表单,我的所有输入都有一个 formControlName 而不是使用数据绑定(bind)。我遇到的问题是 formControlName="number | number : '1.2-2'" is not valid code.It throws an error saying formControlName cannot be found。我不想删除 formControlName 来代替 ngModel,因为我正在订阅表单输入以在使用表单时进行验证。

最佳答案

更新:我意识到一种更简单、更明智的方法是使用 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 自定义函数)方法中插入自定义时间戳转换函数。

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

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

关于angular - 将管道添加到 Angular2 中的 formControlName,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40121623/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com