Question

我有一个绑定到localValue的数字。我想，当我在set（localValue）或模糊时达到最大值时，更新上限最大值的值（在样本中为50）。

但它似乎只有在设置或模糊不再起作用后才能工作一次（模糊从不起作用）。

@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;
  }

Answer 1

您可以通过这种方式定义变量：

private _localValue: number;

我不确定在您的情况下是否需要使用blur事件，因为该值由setter和getter管理。

请参阅此plunkr：https://plnkr.co/edit/rDsX72pSGxFAnBuDPHfq?p=preview。

修改

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

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

您可以这样使用此指令：

@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; }

请参阅此plunkr：https://plnkr.co/edit/rDsX72pSGxFAnBuDPHfq?p=preview。

无法在blur或setValue上更新绑定值

1 个答案: