无法在模糊或setValue上更新绑定值 [英] Can't update bind value on blur or on setValue

问题描述

我有一个绑定到localValue的数字.我会在set(localValue)或blur达到最大值时，更新最大值的最大值(示例中为50).

I have a number which is bound to localValue. I would, when I hit maximum value on set(localValue) or on blur, update value for upper max value (in sample is 50).

但是似乎它仅在设置或模糊不再起作用(模糊不再起作用)后才起作用.

But it seem it work only once after set or blur didn't work anymore (blur never work).

PlunkerSample

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Test On blur update with valid value (Value max is 50)</h2>
      <h2>If you type 9999 --> 5099</h2>
      <input type="number" [(ngModel)]="localValue" (blur)="OnLostFocus()"/>
    </div>
  `
})

...

  private localValue: number;

  public set localValue(value: number) {
    if(value > 50){
      value = 50;
    }

    this._localValue = value;
  }

推荐答案

您可以通过以下方式定义变量:

You would define your variable this way:

private _localValue: number;

我不确定在您的情况下是否需要使用 blur 事件，因为该值由设置器和获取器管理.

I'm not sure that using the blur event is necessary in your case since the value is managed by setters and getters.

请参阅以下示例: https://plnkr.co/edit/rDsX72pSGxFAnBuDPHfq?p=preview .

修改

我会为您的输入创建一个自定义值访问器.这是一个示例:

I would create rather a custom value accessor for your input. Here is a sample:

const CUSTOM_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MaxValueAccessor), multi: true});

@Directive ({
  selector: 'input[max]',
  host: { '(input)': 'doOnChange($event.target)' },
  providers: [ CUSTOM_VALUE_ACCESSOR ]
})
export class MaxValueAccessor extends DefaultValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};

  writeValue(value:any):void {
    if (value!=null) {
      super.writeValue(value);
    }
  }

  doOnChange(elt) {
    var val = elt.value;
    if (val>50) {
      val = 50;
    }
    elt.value = val;
    this.onChange(val);
  }
}

您可以通过以下方式使用此指令:

You could use this directive this way:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Test On blur update with valid value (Value max is 50)</h2>
      <h2>If you type 9999 --> 5099</h2>
      <input max type="number"  [(ngModel)]="localValue"/>
      <h2>Messaged: {{messaged}}</h2>
    </div>
  `,
  directives: [ MaxValueAccessor ]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
  private localValue: number;
}

请参阅以下示例: https://plnkr.co/edit/rDsX72pSGxFAnBuDPHfq?p=preview .

这篇关于无法在模糊或setValue上更新绑定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！