Проверьте, пусто ли поле ввода

Как проверить, пуст ли данный элемент управления ввода? Я знаю, что в поле есть свойство $pristine, которое сообщает, что если заданное поле пуст изначально, но что, если кто-то заполнит поле и снова запишет все содержимое?

Я думаю, что функция выше необходима, так как важно сообщить пользователю, что это поле требуется.

Любая идея будет оценена!

Ответы

Ответ 1

Довольно просто:

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

Вы также можете использовать ng-hide="somefield.length" вместо ng-show="!somefield.length", если это более естественно для вас.

Лучшей альтернативой может быть использование возможностей форм 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>

Обновлен Plnkr здесь.

Ответ 2

Даже вам не нужно измерять длину строки. A! оператор может решить все для вас. Помните всегда: ! (пустая строка) = true ! (некоторая строка) = false

Итак, вы можете написать:

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

Ответ 3

Другой подход заключается в использовании регулярного выражения, как показано ниже, вы можете использовать пустой шаблон регулярного выражения и достичь того же, используя 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>

Контроллер: @formController:

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

Ответ 4

Для автоматической проверки флажка, если поле ввода не пусто.

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

Ответ 5

Приведенный выше ответ не работал с Angular 6. Так вот, как я решил это. Допустим, так я определил свое поле ввода -

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