在Angle 7中将Pipe与FormControlName一起使用

Question

我有一个Angular 7应用程序。 我有一个像下面这样的表格。 我创建一个管道。 而且运行良好。 但是，当我像下面的formControlName那样使用formControlName时，它给我错误。 我该如何实现？

STACKBLITZ

Answer 1

如果要在component.ts中执行转换逻辑，也可以在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

Answer 2

在这里，输入formControlName内的formControlName是不可能的，我已将其放入TS ..

我想在您的代码中进行的更改是，

将您的InputConverterPipe包含在app.module.ts Providers数组中，

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);
  }

在这里工作stackblitz https://stackblitz.com/edit/angular-rcejna ..