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

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

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

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


angularjs angular-ui
person vivek    schedule 22.05.2013    source источник

Ответы (6)


arrow_upward
92
arrow_downward

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

<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 здесь.

person Supr    schedule 22.05.2013
comment
Привет, свойство длины доступно только тогда, когда поле допустимо. Например, я установил для поля minlength значение 5 и ввел только три символа, тогда свойство длины будет недоступно. - person vivek; 22.05.2013
comment
@vivekpoddar Angular должен прощать это, поэтому, когда length недоступен, он оценивает undefined, который интерпретируется как ложный. Если вы пытаетесь выполнить проверку в контроллере, т. е. в JavaScript, а не в выражении Angular, то это совсем другая история, где вам нужно справиться с прощением самостоятельно. Обратите внимание, что есть также атрибут required, который может делать именно то, что вам нужно: docs. angularjs.org/api/ng.directive:input.text - person Supr; 22.05.2013
comment
@vivekpoddar Обновлено required примером. - person Supr; 22.05.2013
comment
спаси мой день! Спасибо дружище! - person thelonglqd; 04.11.2016

arrow_upward
14
arrow_downward

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

Итак, вы могли бы написать:

<input ng-model="somefield">
<span ng-show="!somefield">Sorry, the field is empty!</span>
<span ng-hide="!somefield">Thanks. Successfully validated!</span>
person Iman Sedighi    schedule 27.10.2014
comment
Да, Джонатас, это кажется запутанным, потому что это один и тот же чек, но на самом деле они разные. первый — ng-show, а второй — ng-hide. Так они обратные! :-) вы также можете использовать оба ng-show, но с разными проверками. один с не (!) и другой без не (!). - person Iman Sedighi; 20.11.2015

arrow_upward
5
arrow_downward

Другой подход заключается в использовании регулярного выражения, как показано ниже, вы можете использовать пустой шаблон регулярного выражения и добиться того же с помощью шаблона ng

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;
});
person Shushanth Pallegar    schedule 02.02.2015

arrow_upward
2
arrow_downward

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

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

Чтобы проверить, пусто поле или нет, это должен быть скрипт.

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

Обратите внимание на тонкую разницу между приведенным выше ответом и этим ответом. Я добавил дополнительный атрибут .value после имени ввода myTextBox. Я не знаю, сработал ли приведенный выше ответ для вышеуказанной версии Angular, но для Angular 6 так и должно быть.

Еще немного пояснений, почему эта проверка работает; когда в поле ввода нет значения, значением по умолчанию myTextBox.value будет undefined. Как только вы вводите текст, он становится новым значением myTextBox.value.

Когда ваша проверка равна !myTextBox.value, она проверяет, является ли значение неопределенным или нет, это эквивалентно myTextBox.value == undefined.

person Rito    schedule 10.01.2019

arrow_upward
0
arrow_downward

Чтобы автоматически установить флажок, если поле ввода не пусто.

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

arrow_upward
0
arrow_downward

Если ваше текстовое поле является обязательным полем и имеет некоторый шаблон регулярного выражения для соответствия и имеет минимальную длину и максимальную длину

Код TestBox

<input type="text" name="myfieldname" ng-pattern="/^[ A-Za-z0-9_@./#&+-]*$/" ng-minlength="3" ng-maxlength="50" class="classname" ng-model="model.myfieldmodel">

Класс Ng для добавления

ng-class="{ 'err' :  myform.myfieldname.$invalid || (myform.myfieldname.$touched && !model.myfieldmodel.length) }"
person Tirtha    schedule 14.05.2020