Использование трубы с FormControlName в угловых 7

Question

У меня угловое 7 приложение. И у меня есть форма, как показано ниже. Я создаю трубу. И это работает отлично. Но когда я использую formControlName, как показано ниже, stackblitz, это дает мне ошибку. Как мне этого добиться?

STACKBLITZ

Answer 1

Здесь труба внутри входа formControlName была невозможна, и я превратил вещи в TS ..

Изменения, которые я хотел бы внести в ваш код, были

Включите ваш InputConverterPipe в массив провайдеров в app.module.ts,

providers: [InputConverterPipe]

Затем импортируйте его в app.component.ts,

import { InputConverterPipe } from './input-converter.pipe';

И вставить его в конструктор,

  constructor(public fb: FormBuilder, private inputConverterPipe: InputConverterPipe) { }

И в вашей функции сохранения сделайте console.log такие изменения,

  save() {
    let getFormattedNumber = this.inputConverterPipe.transform(this.myForm.get('myNumber').value);
    console.log(getFormattedNumber);
  }

и работает стекблитц здесь https://stackblitz.com/edit/angular-rcejna ..

Answer 2

Вы также можете использовать pipe в файле ts, если хотите выполнить логику преобразования в component.ts:

Код TS:

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms';

import { InputConverterPipe } from './input-converter.pipe'; // Import the pipe

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [InputConverterPipe]   // Add in providers array
})
export class AppComponent {
  constructor(public fb: FormBuilder, public InputConverterPipe: InputConverterPipe) { }

  myForm = this.fb.group({
    myNumber: [1234567],
  });

  save() {
    var convertedString = this.InputConverterPipe.transform(this.myForm.value.myNumber);
    console.log(convertedString);
  }
}

Stackblitz