29

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

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

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

4

10 に答える 10

38

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

<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]

デモプランク

于 2016-03-06T16:43:49.873 に答える
8

少なくとも私の経験では、ここでの2つの回答は洞察力に富んでいますが、単独では機能していません。

私は両方の部分をまとめて、このバージョンを思いつきました。これは現在、リアクティブな形式で 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>
于 2017-08-02T00:10:23.093 に答える
0

これが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>
于 2018-07-25T07:51:41.573 に答える