web-dev-qa-db-fra.com

Vérifier si une zone de saisie est vide

Comment puis-je vérifier si un contrôle d'entrée donné est vide? Je sais qu'il existe une propriété $pristine sur le champ qui indique que si un champ donné est vide au départ, mais que se passe-t-il si, quand quelqu'un remplit le champ et extrait à nouveau le contenu entier?

Je pense que la fonctionnalité ci-dessus est nécessaire car elle est importante pour dire à l'utilisateur que le champ est requis.

Toute idée sera appréciée!

angularjsangular-ui
51
vivek

Assez facile :

<input ng-model="somefield">
<span ng-show="!somefield.length">Please enter something!</span>
<span ng-show="somefield.length">Good boy!</span>

Vous pouvez également utiliser ng-hide="somefield.length" au lieu de ng-show="!somefield.length" si cela se lit plus naturellement pour vous.

Une meilleure alternative pourrait être de vraiment tirer parti des capacités de forme de Angular :

<form name="myform">
  <input name="myfield" ng-model="somefield" ng-minlength="5" required>
  <span ng-show="myform.myfield.$error.required">Please enter something!</span>
  <span ng-show="!myform.myfield.$error.required">Good boy!</span>
</form>

Mis à jour Plnkr ici.

84
Supr

Même vous n'avez pas besoin de mesurer la longueur de la chaîne. UNE ! opérateur peut tout résoudre pour vous. Rappelez-vous toujours: ! (Chaîne vide) = true ! (Une chaîne) = false

Pour que vous puissiez écrire:

<input ng-model="somefield">
<span ng-show="!somefield">Sorry, the field is empty!</span>
<span ng-hide="!somefield">Thanks. Successfully validated!</span>
13
Iman Sedighi

Une autre approche utilise regex, comme indiqué ci-dessous, vous pouvez utiliser le motif regex vide et obtenir le même résultat avec ng-pattern

HTML:

 <body ng-app="app" ng-controller="formController">
 <form name="myform">
 <input name="myfield" ng-model="somefield" ng-minlength="5" ng-pattern="mypattern" required>
 <span ng-show="myform.myfield.$error.pattern">Please enter!</span>
 <span ng-show="!myform.myfield.$error.pattern">great!</span>
</form>

Contrôleur: @formController: 

         var App = angular.module('app', []);
         App.controller('formController', function ($scope) {              
             $scope.mypattern = /^\s*$/g;
         });
5
Shushanth Pallegar

La réponse ci-dessus ne fonctionnait pas avec Angular 6 . Voici comment je l’ai résolu… .. Disons que c’est ainsi que j’ai défini ma zone de saisie -

<input type="number" id="myTextBox" name="myTextBox"
 [(ngModel)]="response.myTextBox"
            #myTextBox="ngModel">

Pour vérifier si le champ est vide ou non, cela devrait être le script.

<div *ngIf="!myTextBox.value" style="color:red;">
 Your field is empty
</div>

Notez la différence subtile entre la réponse ci-dessus et cette réponse. J'ai ajouté un attribut supplémentaire .value après mon nom d'entrée myTextBox. Je ne sais pas si la réponse ci-dessus a fonctionné pour la version ci-dessus de Angular, mais pour Angular 6 , voici comment procéder.

Quelques explications supplémentaires sur les raisons de cette vérification; lorsqu'il n'y a pas de valeur présente dans la zone de saisie, la valeur par défaut de myTextBox.value sera undefined. Dès que vous entrez du texte, votre texte devient la nouvelle valeur de myTextBox.value. 

Lorsque votre contrôle est !myTextBox.value, il vérifie que la valeur est indéfinie ou non, cela équivaut à myTextBox.value == undefined. 

0
Rito

Pour cocher automatiquement une case si le champ de saisie n'est pas vide.

 <md-content>
            <md-checkbox ng-checked="myField.length"> Other </md-checkbox>
            <input  ng-model="myField" placeholder="Please Specify" type="text">
 </md-content>
0
Abdallah Okasha