Demo

Question

我有一个输入类型文本，它使用formControlName显示值。我写了一个Pipe来格式化值。如何在formControlName上应用此管道（testpipe）。我已阅读here，您无法直接在输入类型文本上应用管道。

@Pipe({ name: 'testPipe' })
export class TestPipe implements PipeTransform {
public transform(value: string): string {
   //some logic
    return value;

  }
}

如何应用此管道

<input tabindex="1" type="text" class="form-control-style" 
formControlName="abc" id="abc" name="abc" 
readonly >

Answer 1

您应该能够使用双花括号表示法来使用管道。像这样：

<input tabindex="1" type="text" class="form-control-style" 
  formControlName="{{'abc' | testPipe}}" id="abc" name="abc" readonly >

Demo

Answer 2

你需要一个＆＃34;模板表达式＆＃34;。来自Angular文档：

模板表达式生成一个值。 Angular执行   表达式并将其分配给绑定目标的属性;该   target可以是HTML元素，组件或指令。

# Notebook for i in range(5): print "Hello world!"中的插值括号围绕模板表达式   {{1 + 1}}。

在您的情况下，使用自定义管道构建模板表达式：

1 + 1

Answer 3

您可以使用 [value]="form.controls.abc.value | testPipe" 来转换输入值

这适用于您希望在输入字段中显示的只读字段。

您仍然可以使用 formControlName="abc" 取得一些成功，这取决于您的管道如何修改 abc 中的值。

如何在角度2的formcontrolname上应用管道

3 个答案:

Demo