web-dev-qa-db-ja.com

angular 2（ngControlに渡される値）で入力値を大文字に変換する方法

angular 2.のngControlの値を使用して入力フィールドを検証しようとしています。ユーザーが常に大文字で値を入力することを検証する必要があります。

次に、ユーザーが入力した値を大文字に変換する必要があります。しかし、ngModelではなくngControlを使用して入力フィールドからの値を処理しています（ngModelChangeイベントを使用して値を大文字に更新することを検討してください）

NgControlが使用する値を変換するための最良かつ低コストの方法は何ですか。

html5angularangular2-templateangular2-forms
15
ankitkamboj

@Eric Martinezが提案したように、ローカルテンプレート変数を作成し、大文字の文字列を入力イベントのvalueプロパティにバインドできます。

<input type="text" #input (input)="input.value=$event.target.value.toUpperCase()" />

または、これをディレクティブにすることもできます。

@Directive({
    selector: 'input[type=text]',
    Host: {
        '(input)': 'ref.nativeElement.value=$event.target.value.toUpperCase()',
    }

})
export class UpperCaseText {
    constructor(private ref: ElementRef) {
    }
}

ディレクティブを使用するには、コンポーネントのディレクティブのリストでUpperCaseTextを指定します。

directives: [UpperCaseText]

デモPlnkr

35
pixelbits

私の解決策は次のとおりです。

ホストリスナーを使用して入力イベントをリッスンし、強制的に大文字にします。

import {Directive, EventEmitter, HostListener, Output} from '@angular/core';
@Directive({
  selector: '[ngModel][uppercase]'
})
export class UppercaseDirective {
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  value: any;

  @HostListener('input', ['$event']) onInputChange($event) {
    this.value = $event.target.value.toUpperCase();
    this.ngModelChange.emit(this.value);
  }
}

このディレクティブを使用すると、次のように入力を簡単に大文字にすることができます。

<input type="text" class="form-control" placeholder="ID"
           formControlName="id" [(ngModel)]="form.value.id" uppercase/>
21
subaru710

少なくとも私の経験では、2つの答えは洞察力に富んでいますが、単独では機能していません： Thierry Templier （最初のコメント付き）、および calから 。

両方の部分をまとめて、このバージョンを思い付きました。このバージョンでは、Angular 4.1.1をリアクティブ形式で使用しています：

import { Directive, Renderer, ElementRef, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/forms';

const LOWERCASE_INPUT_CONTROL_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => LowerCaseInputDirective),
  multi: true,
};

@Directive({
  selector: 'input[lowercase]',
  Host: {
    // When the user updates the input
    '(input)': 'onInput($event.target.value)',
    '(blur)': 'onTouched()',
  },
  providers: [
    LOWERCASE_INPUT_CONTROL_VALUE_ACCESSOR,
  ],
})
export class LowerCaseInputDirective extends DefaultValueAccessor {

  constructor(renderer: Renderer, elementRef: ElementRef) {
    super(renderer, elementRef, false);
  }

  writeValue(value: any): void {
    const transformed = this.transformValue(value);

    super.writeValue(transformed);
  }

  onInput(value: any): void {
    const transformed = this.transformValue(value);

    super.writeValue(transformed);
    this.onChange(transformed);
  }

  private transformValue(value: any): any {
    const result = value && typeof value === 'string'
      ? value.toLowerCase()
      : value;

    return result;
  }
}

これは小文字用ですが、大文字もすべて同じです。名前を変更して、selectorとtransformValue内で置き換えてください。

編集：
このようなディレクティブを使用したHTMLコードからの簡単な使用例：

<input id="myField"
       formControlName="myField"
       type="text" class="form-control required" 
       lowercase>
7
superjos

ControlValueAccessorのカスタム実装を作成します。後者は、ホストの入力イベントをリッスンするディレクティブに対応します。これにより、ユーザーが入力した内容を大文字で入力できるようになります。コントロールには自動的に大文字の値が含まれます。

実装は次のとおりです。

@Directive ({
  selector: 'input[uppercase]',
  // When the user updates the input
  Host: { '(input)': 'onChange($event.target.value.toUpperCase())' }
})
export class UppercaseValueAccessor extends DefaultValueAccessor {
  (...)

  // When the code updates the value of the
  // property bound to the input
  writeValue(value:any):void {
    if (value!=null) {
      super.writeValue(value.toUpperCase());
    }
  }
}

このカスタム値アクセサーをディレクティブプロバイダーに登録することを忘れないでください。この方法では、デフォルト値の代わりにカスタム値アクセサーが使用されます。

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

@Directive ({
  providers: [ UPPERCASE_VALUE_ACCESSOR ],
  (...)
})
export class UppercaseValueAccessor ...

そして、このアプローチを使用したいコンポーネントのdirectives属性にディレクティブを追加します。

詳細については、このクラスを参照してください。

このリンクは、追加のヒントを提供します（セクション「NgModel互換コンポーネント」を参照）。

7
Thierry Templier

pixelbits は優れたソリューションを提供しましたが、ディレクティブがコンポーネントから減価されるため、Angular（v4.3.1）の最新バージョンでは動作しません。私のソリューションは彼の答えだけで、最新の

ブール入力を備えたカスタム属性ディレクティブを使用した汎用ソリューションを提供しています。ブール入力は、入力が大文字の場合、大文字に変換します。

upper-case.directive.ts：

     import { Directive, ElementRef, Input } from '@angular/core';
     @Directive({
     selector: '[UpperCase]',
     Host: {
        '(input)': 'toUpperCase($event.target.value)',

     }

    })
    export class UpperCaseTextDirective  {

    @Input('UpperCase') allowUpperCase: boolean;
    constructor(private ref: ElementRef) {
    }

    toUpperCase(value: any) {
        if (this.allowUpperCase)
        this.ref.nativeElement.value = value.toUpperCase();
    }

    }

以下は、テンプレートに対応するAppコンポーネントです。

app.ts

    //our root app component
   import {Component, NgModule, VERSION} from '@angular/core'
   import {BrowserModule} from '@angular/platform-browser'
   import {UpperCaseTextDirective} from './upper-case.directive'

    @Component({
    selector: 'my-app',
    template: `
    <div>
      <h2>Hello {{name}}</h2>
      Auto Capitalize True: <input [UpperCase]="true" type="text" #input />
    <br/>
     Auto Capitalize False: <input [UpperCase]="allowEdit" type="text"/>

    </div>
    `,
    })
    export class App {
    name:string;
    allowEdit:boolean;
    constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.allowEdit= false;
    }
     }

     @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App,UpperCaseTextDirective ], 
    bootstrap: [ App ]
    })
   export class AppModule {}

これを示す Plnkr です。

5
KIA
<input type="text" oninput="this.value = this.value.toUpperCase()">
works good in angular to get every symbol to be a big one :)
1
Денис Баланчук

ここに私の作業コードはangular4を使用しています

これは大文字のディレクティブです

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appUpper]'
})
export class UpperDirective {

  constructor(public ref: ElementRef) { }

  @HostListener('input', ['$event']) onInput(event) {
    this.ref.nativeElement.value = event.target.value.toUpperCase();
  }

}

これは、大文字のディレクティブを使用したhtmlファイルコードです

<input type="text" id="id" placeholder="id" tabindex="0" formControlName="id" appUpper>
1
Hemant Sharma

基本的にDefaultValueAccessorのようなテキストの「トランスフォーマー」機能が追加された、より一般的なソリューションを次に示します。だからあなたは使うだろう

<input mdInput [transformer]="uppercase" ...>

コンポーネントには大文字の関数があります（マスクを実装するなど、大文字以外のこともできます）...

  uppercase(value: string) {
    return value.toUpperCase();
  }

指令...

import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { Directive, forwardRef, Input, OnChanges, SimpleChanges, Renderer, ElementRef } from '@angular/core';
import { TextMaskModule, MaskedInputDirective } from 'angular2-text-mask';

@Directive({
  selector: 'input[transformer]',
  // When the user updates the input
  Host: { '(input)': 'handleInput($event.target.value)', '(blur)': 'onTouched()' },
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextTransformerDirective), multi: true },
  ]

})
export class TextTransformerDirective implements ControlValueAccessor {
  private inputElement: HTMLInputElement
  lastValue = "";
  onTouched = () => { }
  onChange = (_: any) => { }
  @Input('transformer')
  transformer = (v: string) => v;

  constructor(private renderer: Renderer, private element: ElementRef) {

  }

  handleInput(value: any) {
    let newVal = this.transformer(value);
    if (newVal != value || this.lastValue != newVal) {
      this.lastValue = newVal;
      this.renderer.setElementProperty(this.element.nativeElement, 'value', newVal);
      this.onChange(newVal);
    }
  }

  writeValue(value: any) {
    let normalizedValue = value == null ? '' : value;
    normalizedValue = this.transformer(normalizedValue);
    this.renderer.setElementProperty(this.element.nativeElement, 'value', normalizedValue);
  }

  registerOnChange(fn: (value: any) => any): void { this.onChange = fn }

  registerOnTouched(fn: () => any): void { this.onTouched = fn }

}
1
Cal

ディレクティブなしのシンプルなコード

入力テキストからのblurイベントで、値を大文字に変更するメソッドを呼び出し、私の名前は「cambiaUpper」と呼ばれます

<input id="shortsel" type="text" class="form-control m-b-12" #shortsel="ngModel" name="shortsel" [(ngModel)]="_stockprod.shortName" (blur)="cambiaUpper($event)"/>

そして、コンポーネント（yourComponentFile.ts）で、イベントを受け取るこのメソッドを作成し、イベントから値を取得して、これを大文字に変更します。

public cambiaUpper(event: any) {
      event.target.value = event.target.value.toUpperCase();
}

多田！

0
Axel Osorio