Question

如何检查给定的输入控件是否为空？我知道该字段上有$pristine属性，它告诉我某个字段最初是否为空，但是如果有人填写该字段并再次抽出整个内容呢？

我认为上述功能对于告诉用户需要字段非常重要。

任何想法都将受到赞赏！

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

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

Answer 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;
         });

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

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

有关此检查为何有效的更多说明；如果输入框中没有值，则myTextBox.value的默认值为undefined。输入一些文本后，您的文本即成为myTextBox.value的新值。

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

Answer 5

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

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

Answer 6

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

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

检查输入框是否为空

6 个答案: