在控制器中检查输入字段是否为空 - AngularJS

Question

我刚开始学习AngularJS。在我编写的测试程序中，我需要检查我的输入字段是否为空，在控制器（script）中。

以下是我编写的代码

<div ng-controller="ExampleController">
    <input type="text" ng-model="userFirstName" required/><br>
    <p ng-bind="msg"></p>
</div>

<script>
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('ExampleController', function ($scope) {

       if($scope.userFirstName.length === 0){
          $scope.msg = "pls enter something";
       }else{
          $scope.msg = "Something Entered";
       }
    });
</script>

在这里，我预计输出结果将会是请输入内容。但实际上没有任何输出。

如果我稍微改变一下脚本，它将按照预期显示已输入内容。

<script>
   var mainApp = angular.module("mainApp", []);
   mainApp.controller('ExampleController', function ($scope) {
        $scope.userFirstName = 'Something';
        if($scope.userFirstName.length === 0){
             $scope.msg = "pls enter something";
        }else{
             $scope.msg = "Something Entered";
        }
   });
</script>

这里出了什么问题？据我所知，如果第二个有效，那么第一个应该也有效。否则，两者都无效。

我认为我没有理解某些非常基本的东西。如果是这样，请告诉我我没有阅读到的内容。

谢谢..！

- vigamage

Answer 1

问题在于您只检查了一次作用域属性是否填充。 （这发生在angular初始化控制器时） 您需要在HTML中添加ng-change，然后当模型更改时，该函数将再次触发。

在函数中，您需要再次执行逻辑，如下所示：

var mainApp = angular.module("mainApp", []);
   mainApp.controller('ExampleController', function ($scope) {
        $scope.userFirstName = '';
        $scope.checkContent = function(){
          if($scope.userFirstName.length === 0 || typeof $scope.userFirstName === 'undefined'){
             $scope.msg = "pls enter something";
          }else{
             $scope.msg = "Something Entered";
           }
         } 

   });

然后在你的HTML中：

<div ng-controller="ExampleController">
    <input type="text" ng-change="checkContent()" ng-model="userFirstName" required/><br>
    <p ng-bind="msg"></p>
</div>

- Arno_Geismar

---

仅适用于“输入了某些内容”。当文本框被清除时，它无法按预期工作。 - vigamage

@vigamage，我更新了我的答案，我认为你需要进行未定义或空值检查。此致敬礼。 - Arno_Geismar

是的，就是这样。我认为不需要长度检查。 - vigamage

Answer 2

好的，.length 适用于数组。 这里您没有将 $scope.userFirstName 的类型设置为数组。

请将其修改为：

<div ng-controller="ExampleController">
  <input type="text" ng-model="userFirstName" required="" />
  <br />
  <p ng-bind="msg"></p>
</div>
<script>
  var mainApp = angular.module("mainApp", []);
  mainApp.controller('ExampleController', function ($scope) {
    $scope.userFirstName = '';
     if($scope.userFirstName === ''){
        $scope.msg = "pls enter something";
     }else{
        $scope.msg = "Something Entered";
     }
  });
</script>

请在此处查找plunker: https://plnkr.co/edit/7gc3fj8apFJnE2wNJbQ7?p=preview 希望能对您有所帮助！

- Varit J Patel

---

谢谢你提供“length”的提示。但是这个解决方案不起作用。 - vigamage

Answer 3

尝试使用这个，创建一个函数并在Change事件上调用它

if(!$scope.userFirstName || $scope.userFirstName == null){
                $scope.msg = "pls enter something";
            }else{
                $scope.msg = "Something Entered";
            }

- Kirit

Answer 4

var mainApp = angular.module("mainApp", []);
mainApp.controller('ExampleController', function ($scope) {
    $scope.userFirstName = '';
    $scope.checkContent = function(){
        if($scope.userFirstName)//Check Empty Field
        {
            $scope.msg = "pls enter something";
        }else{
            $scope.msg = "Something Entered";
        }
    } 

});

- S.Elavarasan