检查输入框是否为空答案

【问题标题】：Check if a input box is empty检查输入框是否为空
【发布时间】：2013-05-22 12:28:22
【问题描述】：

如何检查给定的输入控件是否为空？我知道该字段上有$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"，如果这样读起来更自然的话。

更好的选择可能是真正利用form abilities of 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>

Updated Plnkr here.

【讨论】：

您好，length 属性仅在字段有效时可用。例如，我将字段的minlength 设置为 5，并且只输入三个字符，那么长度属性将不可用。
@vivekpoddar Angular should be forgiving 关于这一点，所以当length 不可用时，它的计算结果为undefined，这被解释为错误。如果您尝试在控制器中进行检查，即在 JavaScript 中而不是在 Angular 表达式中，那么您需要自己处理宽恕是另一回事。请注意，还有一个 required 属性可能完全符合您的要求：docs.angularjs.org/api/ng.directive:input.text
@vivekpoddar 更新为required 示例。
拯救我的一天！谢谢朋友！

【解决方案2】：

即使您不需要测量字符串的长度。一种！运营商可以为您解决一切。永远记得： !(空字符串) = true !(一些字符串) = false

所以你可以写：

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

【讨论】：

是的 Jonatas 这似乎令人困惑，因为它是相同的检查，但实际上这些是不同的。第一个是 ng-show，第二个是 ng-hide。所以他们是相反的！ :-) 您也可以同时使用 ng-show 但进行不同的检查。一个带 not (!)，另一个不带 not (!)。

【解决方案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】：

上述答案不适用于 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>

请注意上述答案与此答案之间的细微差别。我在输入名称myTextBox 之后添加了一个附加属性.value。我不知道上面的答案是否适用于上述版本的 Angular，但对于 Angular 6 应该这样做。

更多解释为什么这个检查有效；当输入框中没有值时，myTextBox.value 的默认值将是undefined。只要您输入一些文本，您的文本就会成为myTextBox.value 的新值。

当您的检查是!myTextBox.value 时，它正在检查该值是否未定义，它相当于myTextBox.value == undefined。

【讨论】：

【解决方案5】：

如果输入字段不为空，则自动检查复选框。

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

【讨论】：

【解决方案6】：

如果您的文本框是必填字段并且有一些正则表达式模式要匹配并且有 minlength 和 maxlength

测试框代码

<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) }"

【讨论】：