每当我单击 AngularJS 中的按钮时验证空文本字段

Posted 2023-05-09

【中文标题】每当我单击 AngularJS 中的按钮时验证空文本字段

【英文标题】：Validate empty text fields whenever I click on button in AngularJS

【发布时间】：2018-03-09 20:58:30

【问题描述】：

我已经在 AngularJS 中动态地添加和删除输入文本字段。这是我的代码：

我的 HTML

<div class="form-group">
    <label for="hobbies">Hobbies</label>
    <span ng-repeat="hobby in hobbies track by $index">
        <div class="form-group">
            <input type='text' ng-model='hobbies[$index]' class="form-control pull-right"/>
            <button ng-click = "addHobby()" ng-show="$last">+</button>
            <button ng-click = "removeHobby($index)" ng-show="hobbies.length > 1">-</button>
        </div>
    </span>
</div>

角度控制器

$scope.hobbies = [''];

$scope.addHobby = function() 
    $scope.hobbies.push('');


$scope.removeHobby = function(index) 
    if(index >= 0)
        $scope.hobbies.splice(index, 1);
    

在此，当我点击+ 按钮时，如何验证空文本字段？

【问题讨论】：

在 addHobby 函数中，您可以添加对空字段的检查

【参考方案1】：

将您的 addhobby 函数更改为可以验证空文本字段的内容，例如：

$scope.addHobby = function($index) 
    if($scope.hobbies[$index])
        $scope.hobbies.push('');

和你的html按钮：

<button ng-click = "addHobby($index)" ng-show="$last">+</button>

这样，只要您当前的输入文本字段不为空，您的 addHobby 函数就会添加一个爱好。

【讨论】：

实际上他甚至不需要索引，因为它总是最后一个