使用Angular2时如何在输入类型中实现管道？答案

【问题标题】：How to implement pipe in a input type while using Angular2?使用Angular2时如何在输入类型中实现管道？
【发布时间】：2017-02-15 12:27:36
【问题描述】：

我是 angularJS2 的新手，我正在尝试在表单的输入类型文本中实现管道。例如，如果我有这样的输入标签

  <input type="text" class="col-lg-7 small rounded form-control" formControlName="firstName" />

我希望在文本字段中输入的值全部为大写，我们可以在表单的输入元素中实现吗？

【问题讨论】：

标签： angular

【解决方案1】：

1 - 您不能在输入上使用管道。要实现这种事情，您可以使用(keyup) event：

<input 
  type="text"
  class="col-lg-7 small rounded form-control" 
  formControlName="firstName" 
  (keyup)="upperValue($event.target.value)">

组件：

upperValue(value: string) {
  this.formGroup.patchValue({
    firstName: value.toUpperCase() 
  });
}

STACKBLITZ DEMO

2 - 如果你想为用户显示原始文本并在“幕后”修改它，你可以创建一个指令：

@Directive({
  selector: '[appUppercase]'
})
export class UppercaseDirective implements OnInit {

  private readonly destroySubject$ = new Subject<void>();

  constructor(
    private readonly ngControl: NgControl
  ) { }

  ngOnDestroy(): void {
    this.destroySubject$.next();
    this.destroySubject$.complete();
  }

  ngOnInit(): void {
    this.ngControl.control.valueChanges.pipe(
      takeUntil(this.destroySubject$)
    ).subscribe(value => {
      const newValue = value.toUpperCase();

      this.ngControl.control.setValue(newValue, {
        emitEvent: false,
        emitModelToViewChange: false,
        emitViewToModelChange: false
      });
    });
  }
}

STACKBLITZ DEMO

3 - 如果您想为用户显示修改后的文本并在formControl中保持小写，请修改指令中的以下行：

...
this.elementRef.nativeElement.value = value.toUpperCase();

this.ngControl.control.setValue(value.toLowerCase(), {
  emitEvent: false,
  emitModelToViewChange: false,
  emitViewToModelChange: false
});
...

STACKBLITZ DEMO

【讨论】：

但是，如果我只想在表示层上使用大写怎么办？因此 formControlvalue 将与用户键入的一样。没有任何格式

【解决方案2】：

不能在输入上使用管道。

但是，您可以在输入法中运行管道。

this.toUpper = new UpperCasePipe().transform(input);

希望有帮助

【讨论】：