檢查輸入框是否爲空

如何檢查給定的輸入控件是否爲空？我知道這個字段上有$pristine屬性，它告訴我們如果一個給定的字段最初是空的，但是如果某人填充該字段並再次抽出整個內容會怎麼樣？檢查輸入框是否爲空

我認爲上面的功能是必要的，因爲它告訴用戶該字段是必需的重要。

任何想法將不勝感激！

2013-05-22 vivek

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

來源

2013-05-22 12:33:52 Supr

嗨，長度屬性只有當字段是有效的。例如，我將字段的「minlength」設置爲5，只輸入三個字符，那麼length屬性將不可用。 – vivek

@vivekpoddar [Angular should be forgiving]（http://docs.angularjs.org/guide/expression）儘管如此，所以當'length'不可用時，它的計算結果爲'undefined'，它被解釋爲false。如果你試圖在控制器中進行檢查，即使用JavaScript而不是Angular表達式，那麼這是另一個需要自己處理寬容的故事。請注意，還有一個'required'屬性，它可能正是你想要的：http://docs.angularjs.org/api/ng.directive:input.text – Supr

@vivekpoddar更新爲'required'示例。 – Supr

即使你不需要來衡量字符串的長度。一個！操作員可以爲您解決所有問題。永遠記住：！（空字符串）=真（某些字符串）= FALSE

所以，你可以寫：

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

來源

2014-10-27 18:45:22

它傷害了我的大腦！ **相同**檢查兩種情況？ –

是喬納塔斯似乎令人困惑，因爲它是相同的檢查，但實際上這些是不同的。第一個是ng-show，第二個是ng-hide。所以他們是相反的！ :-)你也可以同時使用ng-show和不同的檢查。一個沒有（！），另一個沒有（！）。 –

我明白了，謝謝你的解釋。 –

另一種方法是使用正則表達式，如下面的節目，你可以使用空正則表達式模式並獲得相同的使用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>

控制器：@formController：

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

來源

2015-02-02 09:25:04

要自動檢查複選框，如果輸入字段不爲空。

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

來源

2017-08-20 12:08:53

檢查輸入框是否爲空

回答

相關問題