角度5 |具有ControlValueAccessor的ReactiveForm |不触发onChange [英] Angular 5 | ReactiveForm with ControlValueAccessor | onChange is not triggered

问题描述

我有一个自定义的ControlValueAccessor，它仅将货币符号附加在输入上.

I have a custom ControlValueAccessor which simply appends a currency symbol on an input.

@Component({
  selector: 'app-currency-input',
  templateUrl: './currency-input.component.html',
  styleUrls: ['./currency-input.component.scss'],
  providers: [
    CurrencyPipe,
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CurrencyInputComponent),
      multi: true
    }
  ]
})
export class CurrencyInputComponent implements ControlValueAccessor {

  @Input() class = '';

  currencyValue: string;

  onChange: (value: number) => void;
  onTouched: () => void;

  constructor(
    private currencyPipe: CurrencyPipe
  ) { }

  parseToNumber(currencyString: string) {
    this.onChange(this.currencyPipe.parse(currencyString));
  }

  transformToCurrencyString(value: number): string {
    return this.currencyPipe.transform(value);
  }

  writeValue(value: number): void {
    if (value !== undefined) {
      this.currencyValue = this.transformToCurrencyString(value);
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

}

CurrencyPipe只是将字符串解析为数字，然后将数字转换为货币字符串(具有本地化的十进制分隔符和货币符号).

The CurrencyPipe just parses the string to number and transforms a number to a currency string (with localized decimal seperator and currency symbol).

当我尝试像这样使用ReactiveForms时:

When I try to use ReactiveForms like this:

<app-currency-input
  name="amount"
  class="value-box"
  formControlName="amount"
  required
></app-currency-input>

...然后手动输入不会触发onChange().

... then onChange() is not triggered on manual input.

我有一个解决方法，我先订阅控件的valueChanges，然后执行

I have a workaround, where I subscribe to the valueChanges of the control and then do a

control.patchValue(newValue, { emitModelToViewChange: true })

...成功触发了ControlValueAccessor的onChange. (不带选项的patchValue会执行相同的操作，因为true是此选项的默认值.我只是想在此指出罪魁祸首.)

... which successfully triggers the onChange for the ControlValueAccessor. (A patchValue without options would do the same, because true is the default value for this option. I just wanted to point out the culprit here.)

但是我很想使用一个内置的解决方案，该解决方案无法解决额外的必要检查和至少两个valueChanges.

But I would love to use an inbuilt solution which does not resolve in additional needed checks and at least two valueChanges.

一个简化的Plunker试用: https://embed.plnkr.co/c4YMw87FiZMpN5Gr8w1f/ 请参见src/app.ts中注释掉的代码.

A simplified Plunker to try it out: https://embed.plnkr.co/c4YMw87FiZMpN5Gr8w1f/ See the commented out code in src/app.ts.

推荐答案

尝试类似的方法

import { Component, Input, forwardRef } from '@angular/core';
import { CurrencyPipe, } from '@angular/common';
import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl, ControlValueAccessor } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'currency-input',
  template: `<input [formControl]="formControl" (blur)="onTouched()"/>`,
  styles: [`h1 { font-family: Lato; }`],
  providers: [
    CurrencyPipe,
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CurrencyInputComponent),
      multi: true
    }
  ]
})
export class CurrencyInputComponent implements ControlValueAccessor {
  constructor(private currencyPipe: CurrencyPipe) { }

  private onChange: Function;
  private onTouched: Function;

  formControl = new FormControl('');
  subscription: Subscription;

  ngOnInit() {
    this.subscription = this.formControl.valueChanges
      .subscribe((v) => {
        this.onChange && this.onChange(this.transform(v));
      })
  }

  ngOnDestroy() {
   this.subscription.unsubscribe();
  }

  writeValue(val) {
    this.formControl.setValue(this.transform(val), { emitEvent: false });
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  private transform(val: string) {
    return this.currencyPipe.transform(val, 'USD')
  }
}

请注意，我正在使用ReactiveFormsModule，因此您需要将其导入到模块中.

Please note that I'm using the ReactiveFormsModule so you need to import it in your module.

实时演示

这篇关于角度5 |具有ControlValueAccessor的ReactiveForm |不触发onChange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！