在角度7中使用带有FormControlName的管道

Question

我有一个角度7应用程序。我的表格如下。我创建了一个管道。而且它运作完美。但是，当我像formControlName一样使用下面的stackblitz时，它会给我错误。我怎样才能做到这一点？

STACKBLITZ

Answer 1

如果要在component.ts中执行转换逻辑，还可以在ts文件中使用pipe：

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内部的管道是不可能的，我把东西变成了TS ..

我想在你的代码中做出的改变是，

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

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 ..