Angular：将自定义管道添加到addControl（）元素

Posted 2021-04-04

所以我创建了一个自定义管道，允许我从文本字段中删除空格。像这样：

@Pipe({ name: 'removeWhiteSpace' })
export class removeWhiteSpacePipe implements PipeTransform {
    transform(value: any) {
        if (!value) {
            return '';
        }

        return value.replace(/\s*/g, "");
    }
}

在html文件中，如果我将其添加到值中就好了，如下所示：

<input type="text" value="{{ value | removeWhiteSpace }}" />

但是，由于项目的开发，我们现在使用.ts文件中的.addControl()添加字段的值，如下所示：

this.phoneNumber.addControl('publicPhoneNumber', new FormControl(null, [Validators.required, Validators.minLength(7), Validators.maxLength(11)]));

现在我们在html中没有value=""。

如何使用自定义管道实现方式？

答案

使用它像：

<input type="text" formControlName="publicPhoneNumber" [value]="phoneNumber.get('publicPhoneNumber').value | removeWhiteSpace "/>

我可能不理解你的完整要求。但是你不想使用value输入属性然后在最大程度上你有一个监听器来更改表​​单控件并使用你的管道就像一个服务，如：

ngOnInit() {
  this.phoneNumber = this._fb.group({
    publicPhoneNumber: []
  })

  this.phoneNumber.get('publicPhoneNumber').valueChanges.subscribe((val) => {
      this.phoneNumber.get('publicPhoneNumber').setValue(this._remSpacePipe.transform(val), {emitEvent: false})
  })
}

在这里查看示例：https://stackblitz.com/edit/angular-vrsxou