Angular2 Muster validator auf Input

Ich versuche zu setup ein Muster validator mit der folgenden regex :

  • ^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$

Versuchen Regex hier

Die es mir erlauben sollten, erhalten 1 bis 3 Ziffern, und dann einen dezimalen Teil von maximal 2 Ziffern, und das sollte es erlauben, leere Werte als gut.

Das problem ist, dass entweder mein input ist vom Typ text und der validator wird die Ablehnung meiner Eingabe (jede Eingabe, da es nicht als eine Ziffer, die ich glaube), oder die Eingabe ist vom Typ number und ohne step="any" mein input-Wert wird zurückgewiesen, wenn ich einen dezimal-Eingabe (während der regex scheint zu funktionieren auf einfachere Werte), und mit step="any" es scheint, mein regex funktioniert nicht bei allen, so dass, was auch immer Wert, weil der step.

<form (ngSubmit)="onSubmit()" #bottleUpdatePriceForm="ngForm" >

    <div class="form-group" *ngFor="let bottle of bottleArrayToUpdate; let i = index">
      <label for="bottlePrice">{{bottle.name}} : </label>
      <input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"
      [pattern]="pricePattern"
      [(ngModel)]="bottleArrayToUpdate[i].price">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
    <!--(click)="bottleUpdatePriceForm.reset();"-->
</form>

EDIT : hinzufügen meine Komponente code für die regex-Bindung

private pricePattern = /^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$/;

Sei es text oder eine Zahl ist mir eigentlich egal, ich brauche nur die Muster auf meinem Eingang... Keine Einsicht, oder etwas, was ich bin fehlt ?

Hier ist ein funktionierendes Beispiel in einem plunkr : https://plnkr.co/edit/znVaS7?p=info

Können Sie schalten Sie den Eingang line-in der plunkr zu sehen, die verschiedenen Fälle :

<input type="text" class="form-control" name="bottlePrice" autocomplete="off"

<input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"

Unabhängig von der Haupt Thema : gibt es eine Möglichkeit zu nennen, die form zurücksetzen, die von der Komponente, anstatt direkt in die Vorlage ?
==> bottleUpdatePriceForm.reset();

Ich Frage mich, dies ist gerade für bonus.

Vielen Dank

  • Könnten Sie bitte teilen Sie die code-Zeile, wo Sie erklären, die regex? Nur um sicher zu gehen, könntest du auch versuchen ^(?:(?:0|[1-9][0-9]{0,2})(?:[.][0-9]{2})?)?$?
  • Ich habe den code Hinzugefügt. Versucht die regex, ändert sich nichts. Das ist wirklich ein problem mit dem Input-Typ glaube ich
  • seltsam, ich habe versucht, setzen Sie sich ein setup und es funktioniert gut. Aber regex ist, was es ist, und es scheint, es funktioniert manchmal für einige, aber nicht für andere 😀 Sie könnten versuchen, diese: könnte es helfen, für mich gearbeitet: so überspringen Sie das Muster, fügen Sie einfach min="0" max="999" step="whatever you want here" 🙂
  • In der Tat, dies funktioniert der trick, aber ich Frage mich nur, warum mein Muster ist nicht korrekt mit den Eingängen...
  • Ja, es ist seltsam, aber am wichtigsten ist, es funktioniert jetzt 🙂 ich werde die Lösung als Antwort, wenn Sie nichts dagegen haben 🙂
  • Ich werde ein upvote für jetzt, ich bin gespannt auf die Muster : werd ich wohl müssen, die später, und dieser kleine hack nicht genug sein

InformationsquelleAutor Alex Beugnet | 2017-01-03
  1. 1

    Dies ist nicht eine direkte Lösung für das nicht funktionierende regex, aber das funktioniert mit dem gleichen Zweck. So entfernen Sie das Muster und einfach ändern Sie Ihre Eingabe mit max und min statt:

    <input type="number" class="form-control" name="bottlePrice" 
     autocomplete="off" step="any" max="999" min="0"
     [(ngModel)]="bottleArrayToUpdate[i].price">
    InformationsquelleAutor AJT82
Schreibe einen Kommentar