Min et la valeur max de l'entrée en application angular4

J'ai un angular4 application avec un formulaire. Dans ce que j'ai une entrée pour entrer un pourcentage. Donc, je souhaite bloquer l'entrée avec une valeur entre 0 et 100.
J'ai essayé d'ajouter min="0" et max="100" mais je peux encore entrer un nombre supérieur à 100 ou plus petit que 0.

modèle

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

Savez-vous comment je peux faire cela ?

Oui , vous avez besoin pour vérifier l'erreur , il n'empêchera pas l'utilisateur d'entrer plus de alors que , il va jeter erreur sur le grand nombre
Si j'obtiens l'erreur, comment puis-je afficher un message d'erreur semblable au rapport d'erreur ?
Qui ne doit pas être marqué en double, la réponse sur le post que vous avez fournie est obsolète. Angulaire 4 prend désormais en charge min/max validateurs.

OriginalL'auteur Adrien | 2017-08-03

18

J'ai réussi à l'aide d'un contrôle de formulaire.
C'est mon code html :
```
    <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>
```
Et dans mon tapuscrit de code, j'ai :
```
        this.rateControl = new FormControl("", [Validators.max(100), Validators.min(0)])
```
Donc, si nous entrez une valeur supérieure à 100 ou plus petit que 0, la conception de matériel d'entrée de devenir rouge et le champ n'est pas valider. Donc après, si la valeur n'est pas bon, je ne sauve pas quand je clique sur le bouton enregistrer.

Note: j'ai découvert que j'avais besoin ReactiveFormsModule importés dans mon module pour utiliser cette solution.
Commentaires pour Mateusz Adamczyk: OK, j'ai besoin d'ajouter une réponse distincte parce que je viens de créer le compte de l'écrire et ne peut pas ajouter un commentaire à @Adrien post. NE PAS MÉLANGER DES RÉACTIFS FORME AVEC LE MODÈLE AXÉ SUR LA FORME! Je ne sais pas pourquoi l'enfer qu'il a plus upvotes ici. Juste s'il vous plaît, ne le faites pas. btw, la meilleure solution que j'ai trouvé pour ce cas: stackoverflow.com/a/52259458/10380064.
où à l'entrée de la ligne "de cette.control débit..." dans le type de script? Le constructeur ou l'ngOnInit() ou quelque part?

OriginalL'auteur Adrien
4

Réellement lorsque vous utilisez le type="nombre" de votre entrée de contrôle de la remplir avec flèche haut/bas pour incrémenter/décrémenter la valeur numérique, de sorte que lorsque vous mettez à jour de zone de texte valeur avec ces bouton, il va pas passer la limite de 100, mais lorsque vous manuellement donner entrée comme 120/130 et ainsi de suite, il va pas valider pour max limite, de sorte que vous avez à valider par le code.

Vous pouvez désactiver la saisie manuelle OU vous devez écrire un peu de code sur valueChange/textChange/clé* événement.

Woah! c'est une mauvaise chose qui ne l'est pas c'est pas comme la plupart des fonctionnalités de base, ou autre, quel est le point de validation angulaire ?

OriginalL'auteur Sandip - Full Stack Developer
4

Voici la solution :

C'est le genre de hack , mais il faudra travailler
```
<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>
```
Voici le lien vers le plunker , veuillez jeter un oeil.

Il fonctionne, mais j'utilise la conception de matériel et je voudrais donc avoir le même design que les autres entrées...
Nan il travaille également avec le vôtre juste mis les champs de saisie directe de la vôtre et essayer
Non, je n'ai pas la conception de matériel.
Oui, il fonctionne très bien aussi dans le tapis d'entrée feilds

OriginalL'auteur Vivek Doshi

Suffit de le faire dans angular2+ en ajoutant (onkeypress)

<input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput"
    (onkeypress)="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"
    name="rateInput">

Testé sur Angulaire 7

OriginalL'auteur Ian Samz

-3

Si vous êtes à la recherche pour valider longueur minLength et maxLength à la place.

OriginalL'auteur Gisler Garces Vargas

Vous devez vous connecter pour publier un commentaire.