控制值存取器移位焦点

Question

​

import { Component, Input, forwardRef, OnChanges } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'formatted-currency-input',
  templateUrl: '../views/formattedCurrencyInput.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => FormattedCurrencyInputComponent),
      multi: true
    }
  ],
  styles: ['.formatted-input {text-align: right; height: 100%; border: none; padding-right: 5px;}']
})

export class FormattedCurrencyInputComponent implements ControlValueAccessor {
  
  @Input()
  private _stringValue: string;

  //private _stringValue: string;

  @Input()
  private _numberValue: number;
  
  textVisible: boolean = false;

  get numberValue() {
    return this._numberValue;
  }

  set numberValue(val: number) {
    this._numberValue = val;
    this.propagateChange(this._numberValue);
  }

  get stringValue() {
    return this._stringValue;
  }

  set stringValue(val: string) {
    this._stringValue = val;
    this.propagateChange(this._stringValue);
  }

  setValue(e: any) {
    let val = e.target.value;
    this._numberValue = parseInt(val);
    this.convertToString(this._numberValue);
    this.propagateChange(this._stringValue);
  }

  toggleActive() {
    this.textVisible = !this.textVisible;
    //console.log(input);
    //input.focus();
  }

  convertToString(num: any) {
    this._stringValue = parseFloat(num).toLocaleString();
  }

  /*
   * Writes a new value from the form model into the view
   * or (if needed) Dom property
   */
  writeValue(obj: any) {
    // Only set the value when it is not undefined
    if (obj !== undefined) {
      this.convertToString(obj);
    }
  }

  propagateChange = (_: any) => {};

  /*
   * Method that registers a handler that should be called when
   * something in the view has changed. It gets a function (propagateChange)
   * that tells other forn directives and form controls to update
   * their values
   */
  registerOnChange(fn: any) {
    this.propagateChange = fn;
  }

  /*
   * Similar to registerOnChage(), this registers a handler
   * specifically for when a control receives a touch event
   */
  registerOnTouched(fn: any) {
    console.log('onTouched()');
  }

  setDisabledState(isDisabled: boolean) {

  }

}

<input class="formatted-input" [hidden]="textVisible" type="text" (focus)="toggleActive()" value="{{_stringValue}}"/>
<input class="formatted-input" [hidden]="!textVisible" type="number" (change)="setValue($event)" (blur)="toggleActive()"/>

​

好吧，我有个奇怪的。我已经为一个工作中的项目构建了一个自定义表单控件，该控件基本上包含两个输入。其中之一是一个数字输入和他的隐藏直到用户点击输入。另一个是文本输入，用于用逗号显示数字。除了当用户单击该组件时，他们必须单击两次才能获得数字输入才能获得焦点，一切都很好。我如何才能做到这一点，请告诉我，如果我能澄清这个问题，因为我知道这是一个奇怪的情况。

​

Answer 1

你可以看看这一堆闪电战。该演示程序使用代码的简化版本，而不使用ControlValueAccessor实现。您将注意到，我对stringValue应用了一种奇怪的格式设置，以明确哪个输入字段是活动的，并且我颠倒了标记中textVisible的含义。

以下是主要的变化：

• 将数字输入的value属性绑定到numberValue
• 在数字输入中定义模板引用变量#numberInput
• 将该变量传递给文本输入的focusInput事件处理程序中的(focus)函数。
• 在设置数字输入的焦点之前调用ChangeDetectorRef.detectChanges

标记

<input [hidden]="!textVisible" type="text" value="{{stringValue}}"
       (focus)="toggleActive(); focusInput(numberInput)"/>

<input #numberInput [hidden]="textVisible" type="number" [value]="numberValue" 
       (change)="setValue($event)" (blur)="toggleActive()"/>

代码(简化版)

textVisible = true;
numberValue = 7248;

constructor(private cd: ChangeDetectorRef) { }

toggleActive() {
  this.textVisible = !this.textVisible;
}

get stringValue(): string {
  return this.numberValue.toLocaleString();
}

setValue(event: Event) {
  this.numberValue = parseInt((event.target as HTMLInputElement).value, 10);
}

focusInput(input: HTMLInputElement) {
  this.cd.detectChanges();
  input.focus();
}