Как использовать трубу в поле реактивной формы?

Question

Я использую реактивную форму в angular6.Поля формы содержат десятичные значения, но мне нужно преобразовать эти десятичные значения в целочисленные значения.

Важно: точность не должна быть потеряна.ТОЛЬКО В ШАБЛОНЕ пользователь должен видеть целочисленные значения.Но в компоненте (он же контроллер) значения должны быть десятичными.

LIVE DEMO здесь.

Моя попытка:

template:

<form [formGroup]="fg">
  <input formControlName="{{name1 | testPipe}}">
  <input formControlName="{{name2 | testPipe}}">
  <input formControlName="{{name3 | testPipe}}">
</form>

компонент (он же контроллер):

  fg: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.fg = this.fb.group({
      name1: this.fb.control(1.3),
      name2: this.fb.control(33.34),
      name3: this.fb.control(3.5),
    })
  }

труба:

@Pipe({
  name: 'testPipe'
})
export class TestPipe implements PipeTransform {

  transform(value: string): any {
    return Math.round(+value);
  }
}

Answer 1

Я думаю, вам нужна директива, а не труба.В директиве вы слушаете события onBlur и onFocus, чтобы сохранить значение и показать округленное значение.Некоторые как

@Directive({ selector: "[testPipe]" })
export class TestPipe  implements OnInit {

  private el: HTMLInputElement;
  private value: any;  //<--here you store the "real value"
  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }
  @HostListener("focus", ["$event.target.value"])
  onFocus() {
    this.el.value = this.value; // on focus return the value stored
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {     //in blur
    this.value = value;  //store the real value
    this.el.value = '' + Math.round(+value); //change the value you show
  }
  ngOnInit()  //At init
  {
    this.value = this.el.value; 
    this.el.value = '' + Math.round(+this.value);

  }

И вы используете как

<form [formGroup]="fg">
  <input formControlName="name1" testPipe >
  <input formControlName="name2" testPipe>
  <input formControlName="name3" testPipe>
</form>
{{fg?.value |json}}

Вы можете увидеть рабочий стекблиц

ПРИМЕЧАНИЕ: Это очень странно, как вы хотитедля управления каналами и создания formGroup см. код

Answer 2

Ваш текущий код выполняет передачу элемента управления формы имя , а не значение.

Возможно, вы захотите импортировать свой канал в шаблон и преобразовать его значение в конструкторе форм.,В зависимости от того, что делает ваш канал, вам может потребоваться использовать фактический FormControl в шаблоне и шаблонном конвейере, а не FormControlName.