使用自定义管道的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)]
   }

angular angular10