Question

您好我正在尝试验证表单元素，而不是将它们封装在表单标记内。我无法在这些元素中使用required和ng-pattern。我搜索了这个问题并在这个link安装程序中找到了jquery有效插件，但我需要以角度完成。请帮助解决任何想法和示例代码。

<div class="col2" >
<label>Country</label>
<select ng-model="country" ng-options="c for c in countries"><option disabled value = "">Please select an option</option></select>
<label>Language</label>
<select ng-model="language" ng-options="l for l in languages" ><option disabled value = "">Please select an option</option></select>
<label>Currency</label>
<select ng-model="currency" id = "application_currency" ng-options="l for l in currencies"><option disabled value = "">Please select an option</option></select>
</div>

<div class="col2">
<label>First Name</label>
<input type="text" ng-model="first" id = "user_firstName"/>
<label>Last Name</label>
<input type="text" ng-model="last" id = "user_lastName"/>
<h3>Default Adjustments</h3>
<div ng-repeat="(i, adj) in adjustments" class="flow">
<input class="col2" type="text" ng-model="adj.name"/>
<input class="col2" type="number" ng-model="adj.value" />
</div>
<button ng-click="addAdjustment()">Additional Field</button> 
</div>

<div class="col2">
<ol>
<li ng-repeat="(line, category) in categories">
  {{line}}
  <ol>
    <li ng-repeat="i in cats"><input type="checkbox"  ng-model="i.checked"/>{{i.name}}</li> 
  </ol>
</li>
</ol>
<button ng-click="save()">Save</button>
</div>

Answer 1

我们这样做了：

HTML：

<input type='text' ng-model='customer.name' ng-class="{false:'has-error', true:'has-success'}[isName]"/>

和我们的控制器中的validate（）函数发送前：

var isValidCustomer = function (customer) {
    $scope.isName = customer.name.length > 3; // or what ever you want to validate
    return ($scope.isName & otherValidations & forOtherFields);
}

'has-error'类是一个bootstrap类，看起来像这样：

.has-error .form-control {
   border-color: #a94442;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 }

问候！

输入，选择和复选框验证，而不使用angularjs中的表单

1 个答案: