Question

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

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内的管道是不可能的，我已将这些东西放入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);
  }

在这里https://stackblitz.com/edit/angular-rcejna进行 stackblitz 。

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

2 个答案: