相关疑难解决方法(0)

我想在使用属性Directive键入时更改(强制)输入字段值.有了它,我想创建一些指令,如大写,小写,maxlength,filterchar等,用于表单上的输入字段.我找到了这个例子:Angular 2 Attribute Directive Typescript Example但这似乎不起作用.也许它是为早期构建的Angular2做的.然而,这正是我想要做的.

当我创建这样的指令时:

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

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

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

(并注册NgModel为提供者).我得到了

undefined this.model.value.

我可以使用$event.target.value = $event.target.value.toUpperCase()(当传递$event时onInputChange())并且适用于视图(它确实将输入显示为大写.但它不会更新绑定字段"field.name".

那么如何创建一个Angular2属性指令呢？

- 编辑 -

经过一番进一步调查后,我设法得到了我想要的东西.Günter提供的答案更接近我的初衷,也许更好.但这是另一种方式:

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

@Directive({ 
selector: '[ngModel][uppercase]',
host: …

我正在使用angular(typescript),我在html中有一个modelform,用户必须插入代码字段和描述字段.

代码字段必须始终由用户输入,始终为大写.

我发现并遵循了这个问题: 如何将输入值转换为角度2的大写(传递给ngControl的值)

但是用户插入的最后一个字母仍然是小写的..但最基本的是数据库总是全部大写(我也设置了4个字符的限制,这是正常的)这是我的代码现在,但如上所述它不能正常工作:

<input type="text" id="code" #code class="form-control" formControlName="code" maxlength="4"
                 (input)="code.value=$event.target.value.toUpperCase()">

有没有人找到一个快速,功能和快速的解决方案？

谢谢!

请帮忙.我在创建一个总是将文本输入设置为大写的指令时遇到了麻烦.它似乎正在查看用户界面,但模型绑定显示仍为小写字符的最后一个类型字符.

下面是我的html的一部分:

<div>
    <md-input-container fxFlex>
        <textarea #listCode mdInput [(ngModel)]="listInfo.code" placeholder="List Code" 
                  uppercase-code maxlength="50" rows="3"
                  required></textarea>
        <md-hint align="end">{{listCode.value.length}} / 50</md-hint>
    </md-input-container>
    {{listInfo.code}}
</div>

以下是指令:

import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[ngModel][uppercase-code]',
  host: {
    '(ngModelChange)': 'ngOnChanges($event)'
  }
})
export class UppercaseCodeDirective {
  constructor(public model: NgControl) {}
  ngOnChanges(event) {
    var newVal = event.replace(/[^A-Za-z0-9_]*/g, '');
    newVal = newVal.toUpperCase();
    this.model.valueAccessor.writeValue(newVal);       
  }
}

我想使用指令将所有输入数据转换为大写。为此，我创建了这个自定义指令：

@Directive({
  selector: '[appToUpperCase]'
})
export class ToUpperCaseDirective {

  constructor() {}

  @HostListener('input', ['$event']) onKeyUp(event) {
    event.target['value'] = event.target['value'].toUpperCase();
  }

}

我这样使用它：

<form [formGroup]="formGroup" appToUpperCase>

几乎可以很好地证明，当我在字段中输入文本时，会保留大写变换，但焦点设置在字段的末尾...因此，当我编辑预填充的输入时，如果要修改开头数据，我必须在每次Keyup事件之后将焦点设置在正确的位置...

我该如何解决？