ios - angularjs ng-required 不适用于 ios

Question

我正在尝试使用 ng-required以一种形式。
我所做的只是添加 ng-required="true"在我的输入。

在 Chrome 中，当点击提交时，它会阻止提交并要求用户按预期填写该字段。在 iPhone 上，它不会显示任何错误并执行提交功能。

<form name="addGuest" ng-submit="GLCtrl.addGuest()">
  <div class="form-group">
    <label for="newGuestFirstName">First Name</label>
    <input type="text" id="newGuestFirstName" ng-model="GLCtrl.newGuest.firstName" class="form-control" required="true"/>
  </div>
  <div class="form-group">
    <label for="newGuestLastName">Last Name</label>
    <input type="text" id="newGuestLastName" ng-model="GLCtrl.newGuest.lastName" class="form-control" required="true"/>
  </div>
  <div class="form-group">
    <label for="arrivalDate">Arrival Date</label>
    <div class="input-group">
      <input type="text" id="arrivalDate" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="GLCtrl.newGuest.arrivalDate" is-open="opened" required="true" close-text="Close"
      />
      <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>
  </div>
  <button type="button" class="btn btn-default" ng-click="GLCtrl.cancelAdd()"><i class="glyphicon glyphicon-remove"></i></button>
  <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-ok"></i></button>
</form>

Answer 1

在继续提交表单之前，您需要检查表单是否有效。关于您的问题，您可能依赖于 HTML5 的 required ng-required 时添加的属性是真的。这可能适用于 chrome，但它部分适用于 IOS。

请参阅此注释 link

Partial support in Safari refers to lack of notice when form with required fields is attempted to be submitted. Partial support in IE10 mobile refers to lack of warning when blocking submission.

解决方案:

在表单中添加 novalidate，不要使用 HTML5 required 属性消息，它只对某些浏览器有用。显式显示所需的错误消息。

示例 HTML 实现:

<form name="form" ng-submit="submit(form, user)">
  <input type="email" required name="email" ng-model="user.email">
  <div ng-show="form.email.$error.required>This field is required</div>
  <input type="password" required name="password" ng-model="user.password">
  <div ng-show="form.password.$error.required>This field is required</div>
  <button type="submit">Login</button>
</form>

示例 Controller 实现:

$scope.submit = function(form, user) {
  if(form.$valid) { // guard against any errors
   // do you login process here..
  }
};

此外，您还可以使用 ng-disabled当表单无效时禁用提交按钮的方法。

<button type="submit" ng-disabled="form.$invalid">Login</button>

更新:

此更新考虑到您正在使用 twitter bootstrap3。通过使用以下类:用于表单组的“has-error”和用于显示错误消息的“help-block”。通过使用 ng-class和 ng-show显示每个 Angular 输入指令和 中提到的 Angular 表单验证指示符的错误的指令FormController 和 NgModelController 文档以及 中显示的指南developer's guide .

DEMO

HTML

<form name="form" ng-submit="submit(form, guest)" novalidate>
  <div class="form-group" ng-class="{'has-error': form.firstName.$invalid && form.firstName.$dirty}">
    <label class="control-label" for="newGuestFirstName">First Name</label>
    <input type="text" id="newGuestFirstName" ng-model="guest.firstName" name="firstName" class="form-control" required="" />
    <div ng-if="form.firstName.$invalid && form.firstName.$dirty">
      <span class="help-block" ng-show="form.firstName.$error.required">This field is required</span>
    </div>
  </div>
  <div class="form-group" ng-class="{'has-error': form.lastName.$invalid && form.lastName.$dirty}">
    <label class="control-label" for="newGuestLastName">Last Name</label>
    <input type="text" id="newGuestLastName" ng-model="GLCtrl.newGuest.lastName" name="lastName" class="form-control" required="" />
    <div ng-if="form.lastName.$invalid && form.lastName.$dirty">
      <span class="help-block" ng-show="form.lastName.$error.required">This field is required</span>
    </div>
  </div>
  <div class="form-group" ng-class="{'has-error': form.arrivalDate.$invalid && form.arrivalDate.$dirty}">
    <label class="control-label" for="arrivalDate">Arrival Date</label>
    <div class="input-group">
      <input type="text" id="arrivalDate" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="arrivalDate" is-open="opened" name="arrivalDate" required close-text="Close" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)">
          <i class="glyphicon glyphicon-calendar"></i>
        </button>
      </span>
    </div>
    <div ng-if="form.arrivalDate.$invalid && form.arrivalDate.$dirty">
      <span class="help-block" ng-show="form.arrivalDate.$error.required">This field is required</span>
    </div>
  </div>
  <button type="button" class="btn btn-default">
    <i class="glyphicon glyphicon-remove"></i>
  </button>
  <button type="submit" class="btn btn-default">
    <i class="glyphicon glyphicon-ok"></i>
  </button>
</form>

JAVSCRIPT

Controller 逻辑提交()

var fields = ['firstName', 'lastName', 'arrivalDate'];

$scope.submit = function(form, guest) {
  if(form.$valid) {
    // form is valid, do you form submission processhere..
  } else {
    angular.forEach(fields, function(field) {
      form[field].$dirty = true;
    });
  }
};