javascript - 使用 Angular 验证模糊输入字段

Question

我做了一个简单的测试输入字段，但我试图在模糊时转换验证，但我不知道要实现这个，因为我对 angularjs 不太熟悉。

任何人都可以帮我验证这个例子中只有一个模糊..

我的Js:

angular.module('myApp', [])
.controller('FormController', function($scope) {
  $scope.fields = [
    {placeholder: 'Username', isRequired: true},
    {placeholder: 'Password', isRequired: true},
    {placeholder: 'Email (optional)', isRequired: false}
  ];

  $scope.submitForm = function() {
    alert("it works!");
  };
});

html:

<div ng-app="myApp">
<form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" novalidate>
  <div ng-repeat="field in fields" ng-form="signup_form_input">
    <input type="text"
           name="dynamic_input"
           ng-required="field.isRequired"
           ng-model="field.name"
           placeholder="{{field.placeholder}}" />
    <div ng-show="signup_form_input.dynamic_input.$dirty && signup_form_input.dynamic_input.$invalid">
      <span class="error" ng-show="signup_form_input.dynamic_input.$error.required">The field is required.</span>
    </div>
  </div>
  <button type="submit" ng-disabled="signup_form.$invalid">Submit All</button>
</form>
</div>

Live Demo

Answer 1

如果您更新到 Angular 1.3，您可以使用 ng-model-options 来更新模糊模型。

<input type="text"
       name="dynamic_input"
       ng-required="field.isRequired"
       ng-model="field.name"
       ng-model-options="{ updateOn: 'blur' }"
       placeholder="{{field.placeholder}}" />

fiddle

但是，如果您无法更新，那么有很多方法可以做到这一点 here .