Question

因此，我创建了一个自定义管道，该管道可让我从文本字段中删除空格。像这样：

composer update

在html文件中，如果我将其添加到它的值中，就像这样：

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

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

但是，由于项目的发展，我们现在在.ts文件中使用<input type="text" value="{{ value | removeWhiteSpace }}" />来添加字段的值，如下所示：

.addControl()

，现在html中没有this.phoneNumber.addControl('publicPhoneNumber', new FormControl(null, [Validators.required, Validators.minLength(7), Validators.maxLength(11)]));。

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

Answer 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

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

1 个答案: