Angular:将自定义管道添加到addControl()元素

问题描述 投票:0回答:1

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

@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=""

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

angular pipe
1个回答
1
投票

使用它像:

<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

© www.soinside.com 2019 - 2024. All rights reserved.