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

上的说明

Safari中的部分支持是指在尝试提交包含必填字段的表单时缺少通知。 IE10 mobile中的部分支持是指在阻止提交时没有警告。

解决方案：

在表单中添加novalidate，不要使用仅对某些浏览器有用的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。通过使用以下类：表单组的“has-error”和显示错误消息的“help-block”。使用ng-class和ng-show指令显示每个角度输入指令中提到的角度形式验证指标的错误以及 FormController 和 {{ 3}} 文档以及 NgModelController 中显示的指南。

<强> developer's guide

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

控制器逻辑提交（）

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;
    });
  }
};

angularjs ng-required不适用于ios

1 个答案: