it-swarm.com.de

Wie man den Eingabewert in Winkel 2 in Großbuchstaben umwandelt (Wert wird an ngControl übergeben)

Ich versuche, die Eingabefelder mit dem Wert von ngControl in Winkel 2 zu überprüfen Ich muss bestätigen, dass der Benutzer den Wert immer in Großbuchstaben eingibt. 

Nun müssen wir den vom Benutzer eingegebenen Wert in Großbuchstaben umwandeln. Aber ich arbeite mit Werten aus Eingabefeldern, die ngControl verwenden, nicht ngModel.

Was ist der beste und kostengünstigste Weg, den von ngControl verwendeten Wert zu konvertieren? 

11
ankitkamboj

Wie von @Eric Martinez vorgeschlagen, können Sie eine lokale Vorlagenvariable erstellen und die Großbuchstabenzeichenfolge mit der value -Eigenschaft des Eingabeereignisses verbinden:

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

Alternativ können Sie dies zu einer Direktive machen:

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

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

Um die Direktive zu verwenden, geben Sie in der Liste der Direktiven Ihrer Komponente UpperCaseText an:

directives: [UpperCaseText]

Demo Plnkr

27
pixelbits

Hier ist meine Lösung:

Verwenden des Host-Listeners zum Abhören des Eingabeereignisses und zum Erzwingen der Großschreibung.

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

Mit dieser Anweisung können Sie die Eingabe in Großbuchstaben wie folgt erzwingen:

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

Ich würde eine benutzerdefinierte Implementierung von ControlValueAccessor erstellen. Letzteres würde einer Anweisung entsprechen, die das Eingabeereignis des Hosts abhören würde. Auf diese Weise können Sie in Großbuchstaben eingeben, was der Benutzer ausfüllt. Das Steuerelement enthält den Wert automatisch in Großbuchstaben.

Hier ist die Implementierung:

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

Vergessen Sie nicht, diesen benutzerdefinierten Accessor in den Direktive Providern zu registrieren. Auf diese Weise wird Ihr benutzerdefinierter Wertenzugangstor anstelle des Standardzugriffs verwendet.

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

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

Fügen Sie die Direktive in das Direktive-Attribut der Komponente ein, für die Sie diesen Ansatz verwenden möchten.

Weitere Informationen finden Sie in dieser Klasse:

Dieser Link kann zusätzliche Hinweise geben (siehe Abschnitt "NgModel-kompatible Komponente):

7

Zumindest in meiner Erfahrung fand ich zwei der Antworten hier aufschlussreich, arbeitete aber nicht eigenständig: von Thierry Templier (auch mit dem ersten Kommentar) und von cal .

Ich habe Teile von beiden zusammengestellt und diese Version entwickelt, die jetzt mit Angular 4.1.1 in einer reaktiven Form arbeitet:

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

Dies ist für Kleinbuchstaben, aber alles gilt auch für Großbuchstaben. Umbenennen Sie Direktive und ersetzen Sie sie innerhalb von selector und transformValue.

Bearbeiten:
Ein einfaches Anwendungsbeispiel aus HTML-Code, das eine solche Direktive verwendet:

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

pixelbits hat eine großartige Lösung bereitgestellt, funktioniert aber in der neuesten Version von Angular (v4.3.1) nicht, da Anweisungen von der Komponente abgeschrieben werden. Meine Lösung basiert nur auf seiner Antwort, funktioniert aber mit der neuesten 

Ich biete eine generische Lösung mit benutzerdefinierten Attributdirektiven mit einer booleschen Eingabe an, die die Eingabe in Großbuchstaben umwandelt, wenn sie wahr ist. 

großbuchstaben.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();
    }

    }

Hier ist die entsprechende App-Komponente mit der Vorlage.

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 {}

Hier ist ein Plnkr , das dies demonstriert.

5
KIA
<input type="text" oninput="this.value = this.value.toUpperCase()">
works good in angular to get every symbol to be a big one :)

Hier ist mein Arbeitscode, den ich angle4 verwende

Dies ist Ihre Anweisung für Großbuchstaben 

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

}

Dies ist Ihr HTML-Dateicode, in dem Sie die Direktive für Großbuchstaben verwendet haben

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

Hier ist meine generischere Lösung, die im Grunde wie DefaultValueAccessor mit einer Text- "Transformator" -Funktion hinzugefügt wurde. Also würdest du verwenden 

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

In Ihrem Compontent haben Sie die Großbuchstabenfunktion (Sie können neben Großbuchstaben auch andere Funktionen ausführen, z. B. eine Maske implementieren) ...

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

Richtlinie ...

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

Einfacher Code ohne Anweisungen

Beim Unschärfe-Ereignis von Ihrem Eingabetext rufen Sie eine Methode auf, die den Wert in Großbuchstaben ändert. Mein Name ist "cambiaUpper".

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

Erstellen Sie in der Komponente (yourComponentFile.ts) diese Methode, die das Ereignis empfängt, holen Sie den Wert des Ereignisses ab und ändern Sie diesen in Großbuchstaben.

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

Tada!

0
Axel Osorio