如何解决使用自定义管道的Mat输入实时更新无法正常工作
我在使用角度定制管道时遇到了这个奇怪的问题。我正在使用角度10。 当我在输入字段中输入值时,它不会更新。但是,当我在管道定义中的条件中执行console.log时,值到达了那里。 但是它没有返回更新的值。我也没有看到任何错误。 我的要求是将输入字段值的最大长度保持为3。
这是我在mat-input字段中调用自定义管道的方式:
<input matinput formControlName="Quantity" autocomplete="off" type="text" value="{{form.value.Quantity | digit}}">
下面是我的自定义管道代码。
import { Pipe,PipeTransform } from '@angular/core';
@Pipe({
name: 'digit'
})
export class DigitPipe implements PipeTransform {
transform(value: any = ''): any {
if (value.length > 3) {
return (value.substring(0,3));
}
else {
return value;
}
}
}
反应性表格代码 这是一个重复的表单数组
ngOnInit(): void {
this.form= this.fb.group({
clone: this.fb.array([])
});
// Updating Data from API
this.siteFormArray.push(this.fb.group(
{
Quantity: [objFromApi.Quantity]
}
}
get siteFormArray(): any {
return this.form.get('clone') as FormArray;
}
解决方法
您不能混合使用输入的formControlName和“ value”属性,因为无论您做什么,formControlName都会覆盖输入的值。
如果要限制输入的长度,请在formGroup声明中使用验证器max:
this.siteFormArray.push(this.fb.group(
{
Quantity: [objFromApi.Quantity,[Validators.max(999)]
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。