使用ngModel的属性指令更改字段值 [英] Attribute directive with ngModel to change field value

问题描述

我想在使用属性伪指令键入时更改（强制）输入字段值。有了它，我想创建指令，例如大写，小写，maxlength，filterchar等，以在表单的输入字段上使用。我找到了以下示例：角度2属性指令打字稿示例但这似乎不起作用。也许它是对Angular2的早期版本所做的。

I want to change (force) input field values while typing using a attribute Directive. With it I would like to create directives like uppercase, lowercase, maxlength, filterchar, etc. to be used on input fields on forms. I found this example: Angular 2 Attribute Directive Typescript Example but this doesn't seem to work. Maybe it did for an earlier build of Angular2. It is however exactly what I would like to do.

当我创建这样的指令时：

When I create a directive like this:

import {Directive} from 'angular2/core';
import {NgModel} from 'angular2/common';

@Directive({ 
selector: '[ngModel][uppercase]', 
host: {
    '(input)' : 'onInputChange()'
      }
})
export class UppercaseDirective{

constructor(public model:NgModel){}

onInputChange(){
    var newValue = this.model.value.toUpperCase();
    this.model.valueAccessor.writeValue(newValue);
    this.model.viewToModelUpdate(newValue);
    }
}

并在这样的表单上使用它：

And use it on a form like this:

<input type="text" class="form-control" [(ngModel)]="field.name" ngControl="name" #name="ngForm" required uppercase>

（并将 NgModel 注册为提供者） 。我得到

(and register NgModel as a provider). I get an

未定义this.model.value。

undefined this.model.value.

我可以使用 $ event.target.value = $ event.target.value.toUpperCase（）（在传递 $ event <时/ code>和 onInputChange（）），并且适用于视图（确实将输入显示为大写。但是不会更新绑定字段

I can use $event.target.value = $event.target.value.toUpperCase() (when passing $event with the onInputChange()) and that works for the view (it does show the input as uppercase. But it doesn't update the bind field "field.name".

那么如何创建执行此操作的Angular2属性指令？

So how to create an Angular2 attribute directive that does this?

-编辑-

经过进一步的调查，我终于找到了想要的东西。Günter提供的答案更接近我的初衷，也许更好。但这是另一种方式：

After some further investigation I managed to get what I want. The answer Günter provided is closer to my original intention and perhaps better. But here is another way:

import {Directive, Input, Output, EventEmitter} from 'angular2/core';

@Directive({ 
selector: '[ngModel][uppercase]',
host: {
"(input)": 'onInputChange($event)'
    }
})
export class UppercaseDirective{
@Output() ngModelChange:EventEmitter<any> = new EventEmitter()
value: any

onInputChange($event){
    this.value = $event.target.value.toUpperCase()
    this.ngModelChange.emit(this.value)
    }
}

我不确定这是否也是这样做的好方法，因此欢迎发表评论。

As I said I'm not sure if this is also a good way to do this so comments are welcome.

推荐答案

update

此方法无法正常工作。请参阅@RyanHow的答案以获得更好的解决方案。

This approach doesn't work properly. See @RyanHow's answer for a better solution.

原始

@Directive({ 
  selector: '[ngModel][uppercase]',
  providers: [NgModel],
  host: {
    '(ngModelChange)' : 'onInputChange($event)'
  }
})
export class UppercaseDirective{
  constructor(private model:NgModel){}

  onInputChange(event){
    this.model.valueAccessor.writeValue(event.toUpperCase());
  }
}

柱塞

这篇关于使用ngModel的属性指令更改字段值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！