Question

我在angular6中使用反应形式。表单字段包含十进制值，但我需要将这些十进制值转换为整数值。

重要提示：准确性不应该丢失。应该只在TEMPLATE用户中看到整数值。但是在组件（aka控制器）中，值应为小数。

我的尝试：

模板：

      <?php if($this->session->userdata('user_class') == 1) : ?>
        <li><a href="<?php echo base_url(); ?>Users">User List</a></li>
      <? endif; ?>

组件（又名控制器）：

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

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

  }

您使用like

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

您可以看到working stackblitz

注意：您想要管理管道和创建formGroup的方式非常奇怪，请参见代码

Answer 2

您当前的代码正在做的是传递表单控件 name ，而不是值。

您可能想将管道导入模板，并在表单构建器中转换值。根据管道的功能，您可能需要在其中的模板和模板管道中使用实际的FormControl，而不是FormControlName。

如何在反应形式字段中使用管道？

2 个答案: