Min und Max Wert der Eingabe in winkel4 Anwendung

Question

Ich habe eine angular4 Anwendung mit einem Formular. In diesem habe ich eine Eingabe, um einen Prozentsatz einzugeben. Also, ich mag den Eingang mit dem Wert zwischen 0 und 100. I min="0" und max="100" hinzuzufügen versucht zu blockieren, aber ich kann noch eine Nummer größer als 100 oder kleiner als 0

Vorlage eingeben

<md-input-container> 
    <input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput" 
    name="rateInput"> 
    <md-error>Required field</md-error> 
</md-input-container> 

Wissen Sie, wie ich das machen kann?

Answer 1

Ich war erfolgreich mit einer Formularsteuerung. Das ist mein HTML-Code:

<md-input-container> 
     <input type="number" min="0" max="100" required mdInput placeholder="Charge" [(ngModel)]="rateInput" name="rateInput" [formControl]="rateControl"> 
     <md-error>Please enter a value between 0 and 100</md-error> 
    </md-input-container> 

Und in meinem Typoskript Code, ich habe:

 this.rateControl = new FormControl("", [Validators.max(100), Validators.min(0)]) 

Wenn wir also einen Wert höher als 100 oder kleiner als 0 ist, das Material Design Eingang werden eingeben rot und das Feld ist nicht gültig. Also, wenn der Wert nicht gut ist, speichere ich nicht, wenn ich auf die Schaltfläche Speichern klicke.

Answer 2

Eigentlich, wenn Sie type = „Nummer“ Ihre Eingabesteuerung verwenden bevölkert mit nach oben/unten Pfeil/Dekrement numerischen Wert zu erhöhen, so dass, wenn Sie Textbox Wert mit diesem Knopf aktualisieren wird es nicht Grenze von 100 passieren, aber manuell Geben Sie Eingabe wie 120/130 und so weiter, wird es nicht validieren für maximale Grenze, so müssen Sie es durch Code validieren.

Sie können die manuelle Eingabe deaktivieren ODER Sie müssen einen Code auf valueChange/textChange/key * -Ereignis schreiben.

Answer 3

Hier ist die Lösung:

Diese Art von Hack ist, aber es wird

arbeiten

<input type="number" 
placeholder="Charge" 
[(ngModel)]="rateInput" 
name="rateInput" 
pattern="^$|^([0-9]|[1-9][0-9]|[1][0][0])?" 
required 
#rateInput2 = "ngModel"> 

<div *ngIf="rateInput2.errors && (rateInput2.dirty || rateInput2.touched)" 
    <div [hidden]="!rateInput2.errors.pattern"> 
     Number should be between 0 and 100 
    </div> 
</div> 

Hier ist der Link zu der plunker, haben Sie bitte einen Blick.