it-swarm.com.de

Prüfen Sie, ob ein Eingabefeld leer ist

Wie kann ich überprüfen, ob eine bestimmte Eingabesteuerung leer ist? Ich weiß, dass es eine $pristine-Eigenschaft in dem Feld gibt, die besagt, dass ein bestimmtes Feld anfangs leer ist. Was passiert, wenn jemand das Feld ausfüllt und den gesamten Inhalt erneut löscht?

Ich denke, dass die obige Funktion notwendig ist, um dem Benutzer mitzuteilen, dass das Feld erforderlich ist.

Jede Idee wird geschätzt!

51
vivek

Ziemlich einfach :

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

Sie könnten auch ng-hide="somefield.length" anstelle von ng-show="!somefield.length" verwenden, wenn dies für Sie natürlicher ist.


Eine bessere Alternative könnte sein, die form-Fähigkeiten von Angular wirklich zu nutzen:

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

Plnkr hier aktualisiert.

84
Supr

Auch müssen Sie die Länge der Schnur nicht messen. EIN ! Operator kann alles für Sie lösen. Denken Sie immer daran: ! (Leere Zeichenfolge) = wahr ! (Einige Zeichenfolge) = falsch

Sie könnten also schreiben:

<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

Ein anderer Ansatz ist die Verwendung von Regex. Wie unten gezeigt, können Sie das leere Regex-Muster verwenden und dasselbe mit 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>

Controller: @formController: 

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

Die obige Antwort funktionierte nicht mit Angular 6 . Das Folgende ist, wie ich es gelöst habe . Sagen wir, so habe ich mein Eingabefeld definiert -

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

Um zu überprüfen, ob das Feld leer ist oder nicht, sollte dies das Skript sein.

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

Beachten Sie den subtilen Unterschied zwischen der obigen Antwort und dieser Antwort. Ich habe ein zusätzliches Attribut .value nach meinem Eingabenamen myTextBox hinzugefügt. Ich weiß nicht, ob die obige Antwort für die obige Version von Angular funktioniert, aber für Angular 6 So sollte es gemacht werden.

Weitere Erklärungen, warum diese Prüfung funktioniert; Wenn im Eingabefeld kein Wert vorhanden ist, ist der Standardwert von myTextBox.valueundefined. Sobald Sie einen Text eingeben, wird Ihr Text zum neuen Wert von myTextBox.value

Wenn Sie !myTextBox.value prüfen, wird überprüft, ob der Wert undefiniert ist oder nicht, und entspricht myTextBox.value == undefined

0
Rito

Um ein Kontrollkästchen automatisch zu markieren, wenn das Eingabefeld nicht leer ist.

 <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