Min / Max Validateur Angulaire 2 Final
Selon thoughtgram.io, actuellement pris en charge les validateurs sont:
- nécessaire
- minlength
- maxlength
- modèle
Donc, en considérant le code suivant (plunkr ici):
@Component({
selector: 'my-app',
template: `
<form #formRef="ngForm">
<input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/>
<input type="text" [(ngModel)]="secondValue" maxlength="5" name="secondValue" required/>
<button type="submit"> Submit </button>
</form>
FORM: {{formRef.form | json }}
`
})
export class AppComponent {
firstValue = -22;
secondValue = "eyy macarena!";
}
Tout minlength
est pris en charge, min="0"
est ignoré par angulaire de validation:
Donc, pour faire la forme d'entraîner une erreur lors de la firstValue ngModel < 0, ai-je besoin pour construire un validateur personnalisé?
FirstValue < 0
, et<input ngModel="firstValue" min="0"
. Forme d'état:VALID
. Ai-je vraiment besoin de construire un validateur personnalisé pour s'assurer Formulaire statut:INVALID
lorsque le modèle est en dehors de la plage demin
/max
valeurs, ou est-il quelque chose de NG2 prend nativement en charge?- Oui, vous devrez. Vérifier le code source ici: github.com/angular/angular/blob/master/modules/%40angular/forms/... Seulement ces 4 validateurs mentionné par thoughtram article sont prises en charge OOTB.
Vous devez vous connecter pour publier un commentaire.
À appliquer
min/max validation
sur unnumber
vous aurez besoin de créer unCustom Validator
Les validateurs classe actuellement seulement quelques validateurs, à savoir
Validator: Ici est édulcoré version de mon numéro de programme de validation, vous pouvez l'améliorer comme vous le souhaitez
Utilisation:
min
/max
propriétés des entrées?? c'est très peu intuitivemin
etmax
et pas tous d'entre eux attendaient la validation à partir d'elle. Il y a cette demande mais il a une portée plus vaste et peut-être plus lent à se produire, et j'ai donc ajouté plus adaptées demande tout à l'heure.J'ai trouvé une bibliothèque de la mise en œuvre de beaucoup de validateurs personnalisés - ng2-validation - qui peut être utilisé avec le modèle axé sur les formes (attribut directives). Exemple:
Vous pouvez implémenter votre propre validation (modèle de moteur) facilement, par la création d'une directive qui met en œuvre la
Validator
interface.Autant que je sache, est-il mis en œuvre maintenant, vérifiez https://github.com/angular/angular/blob/master/packages/forms/src/validators.ts
C'est la partie qui met en œuvre ce que vous cherchez:
Je cherchais la même chose aujourd'hui, utilisé cette pour le résoudre.
Mon code:
Créer un service NumberValidatorsService et ajouter du programme de validation des fonctions:
De service à l'importation dans le module.
Ajouter inclut déclaration en composant lorsqu'il est destiné à être utilisé:
Ajouter des validateurs pour générateur de formulaire:
Dans le modèle, vous pouvez afficher les erreurs comme suit:
disabled
à quel point vous trouvez que c'est une énorme galère pour obtenir que cela fonctionne correctement. Vous finissez par avoir à créer toutes sortes de complexes d'abonnements, de définir des accesseurs, et le changement des détecteurs juste pour désactiver dynamiquement vos formes. Terrible qui Angulaire a décidé de quitter la capacité à fournir une fonction de ladisable
initialisation réactive contrôles de formulaire.Angulaire 6 prend en charge min & max validateurs: https://angular.io/api/forms/Validators
Vous pouvez utiliser ceux de l'statique & des valeurs dynamiques.
Statique:
Dynamique:
this.templateItem1 = new FormControl('', [ Validators.required, Validators.pattern('[0-9]+'), Validators.min(1), Validators.max(10) ]);
Pour un champ de saisie qui a été nécessaire, permet seulement des nombres, et doit être dans la gamme de [1-10]. Dans le HTML, l'élément est:<input type="text" class="form-control" id="item1" formControlName="templateItem1">
(et qui existe à l'intérieur d'unform-group
&form
élément), et puis vous pouvez utiliser leform-control-feedback
avectemplateItem1.errors .dirty .touched
pour la validation des messages.J'ai trouvé cela comme une solution. Créer un validateur personnalisé comme suit
et en vertu de l'constructeur inclure le code ci-dessous
où customForm est un FormGroup et _builder est un FormBuilder.
Apparemment, Angulaire eu le max/min directives pour les modèles des formulaires à un certain point, mais a dû les retirer en v4.2.0. Vous pouvez lire à propos de la régression qui a provoqué le retrait ici: https://github.com/angular/angular/issues/17491
Pour l'instant la seule solution que je connaisse est d'utiliser personnalisée directive @amd a suggéré. Voici comment l'utiliser avec Bootstrap 4.
min-validator.la directive.ts
Et dans votre modèle:
Espérons que cette aide!
UTILISATION
Il peut être utilisé lors de la création d'un formGroup variable le long de avec d'autres validateurs, comme dans
dueAmount:
['', [Validators.required, Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/), Validators.min(5)]]
Ne sais pas si c'est dans Angulaire 2, mais est disponible dans Angulaire 5
Dans les dernières Angulaire versions, min et max sont déjà ajoutés. Voici le lien:
https://angular.io/api/forms/Validators#max
C'est de cette façon que j'ai utilisé Max validateur dans mon projet:
Initialiser le formulaire de contrôle et d'ajouter le validateur dans le composant:
Vous pouvez également définir validateur de façon dynamique sur un événement comme celui-ci:
Espère que cela aide.
Angulaire fournit les validateurs par défaut. Ajouter la liste ici, de sorte que les nouveaux arrivants peuvent facilement apprendre à connaître ce que sont actuellement pris en charge par défaut de validateurs et google plus que par leur intérêt.
vous obtiendrez la liste complète Angulaire validateurs
Comment utiliser la fonction min/max validator:
À partir de la documentation de l'Angulaires -
utilisation min validateur formControl, (pour plus d'informations, cliquez ici)
utilisation max validateur formControl, (pour plus d'informations, cliquez ici)
nous avons parfois besoin d'ajouter du programme de validation de façon dynamique. setValidators() est le sauveur. vous pouvez l'utiliser comme ci -
Dans votre code que vous utilisez
min
et pasminlength
. Veuillez également noter que ce ne sera pas validé si un nombre est > 0, mais sa longueur.