Question

我正在使用Ionic并尝试使用验证创建登录表单，但是如何在输入框的占位符中显示错误消息而不是使用ng-show？此外，如果输入框无效，如何更改另一个元素的CSS？我一直在寻找任何在线文档，但仍然没有线索，希望有人可以帮助我，谢谢！

Answer 1

也许一个合适的答案是使用ng-touching？可以在此处找到Angular的文档和其他表单验证的文档：https://docs.angularjs.org/guide/forms

Answer 2

Angular使用一些额外的数据扩展了form元素，这些数据可以通过表单和模板中的输入name属性进行访问。 https://jsfiddle.net/ttvx446q/

<强> HTML

<div ng-app="myApp">
  <div ng-controller="myForm">

    <!-- form -->
    <form name="formElement" ng-submit="log(user)" novalidate>
      <div class="row">
        <label>
          Name:
          <input type="text" name="name" ng-model="user.name" placeholder="{{formElement.$submitted && formElement.name.$invalid ? 'Invalid name' : 'Default placeholder'}}" required>
        </label>
      </div>
      <div class="row">
        <button type="submit">Submit</button>
      </div>
    </form>

    <!-- output -->
    <h3>Logs:</h3>
    <div class="logs">
      <div>
        <strong>user:</strong> {{user | json}}
      </div>
      <div ng-class="{error: formElement.$submitted && formElement.name.$invalid}">
        <strong>name:</strong> {{formElement.name | json}}
      </div>
    </div>

  </div>
</div>

如何在占位符中显示错误消息：

查看此行placeholder="{{formElement.$submitted && formElement.name.$invalid ? 'Invalid name' : 'Default placeholder'}}"，您会看到占位符是一个动态值，它根据三元运算符而变化。如果已提交formElement且name输入无效，则占位符会显示错误消息。

如果输入无效，如何更改其他元素的CSS：

请参阅此行ng-class="{error: formElement.$submitted && formElement.name.$invalid}"。这会将类'错误'应用于之前使用的相同条件。

离子和Angular JS表单验证在占位符中显示消息

2 个答案: