来自列表验证的 Angular JS 自定义文本框答案

【问题标题】：Angular JS custom textbox from a list validation来自列表验证的 Angular JS 自定义文本框
【发布时间】：2015-10-25 11:25:22
【问题描述】：

我正在从如下列表创建动态文本框

Angular js

$scope.phonenumbers = [{text: ''},{text: ''},{text: ''}];

HTML 部分

<div class="relativeWrap" ng-repeat="phone in phonenumbers">
     <input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" >
</div>

现在我需要在表单中进行以下验证

以下 3 个文本框中的任何一个都是必需的。我输入了required，但它正在验证所有内容。

请帮忙

【问题讨论】：

你的问题一点都不清楚
验证将在提交时起作用，您的表单标签提交按钮在哪里等。也添加该代码和更多细节
我得到了一个列表，从该列表中我在一个表单中创建了 3 个文本框。我需要验证表单提交上的文本框。就像任何一个文本框都是强制性的。即用户可以填写任何一项，而不是全部。 3 个中只有一个是强制性的。

标签： html angularjs validation

【解决方案1】：

只有当所有字段都没有值时，您才需要使用 ng-required 并有条件地将所有字段的 required 设置为 true。为此，您需要在控制器中维护一个标志并绑定您的 ng-required。

控制器中的方法：

$scope.isValue = false;

$scope.textChange = function(){
    $scope.isNoValue = $scope.phonenumbers.some(function(item)){
          return item.text;
     }
}

您的 HTML：

<div class="relativeWrap" ng-repeat="phone in phonenumbers">
     <input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" ng-required="!isValue" ng-change="textChange">
</div>

【讨论】：