Angularjs ng-required在ios上无法运行怎么解决?

标签: ios AngularJS
发布时间: 2017/3/27 20:11:52
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.
我试着在表单里用ng-required。我所做的就是在输入中添加ng-required="true"

在Chrome中,当单击submit时,它会阻止提交,并要求用户按预期填充字段。在iPhone上,它不会显示任何错误,它会执行submit方法。

<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>

       

解决方法 1:

您需要检查该窗体是否有效至您的窗体提交过程之前。至于你的问题,你可能依靠 HTML5 的 required 属性,添加时 ng-required 是真的。这可能在 chrome 上工作,但这部分工程在 IOS。

见关于此链接的说明

在 Safari 中的部分支持指缺乏的通知时必填字段的形式试图提交。部分支持在 IE10 移动是指缺乏预警阻止提交时。

解决方法︰

在您的窗体中添加激活,不使用消息只对某些浏览器有用的 HTML5 必需的属性。明确显示所需的错误消息。

示例 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>

控制器实现的示例︰

$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。通过使用下面的类: '有-错误' 窗体组和 '帮助块' 为显示错误消息。通过使用 ng-classng-show 中每个角的输入的指令和FormControllerNgModelController文件指南及中也显示开发人员指南中所提到的验证指标显示与角形式错误的指令。

演示

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

控制器逻辑 submit()

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;
    });
  }
};
赞助商