Ionic & Angular JS 表单验证在占位符中显示消息答案

【问题标题】：Ionic & Angular JS form validation show message in placeholderIonic & Angular JS 表单验证在占位符中显示消息
【发布时间】：2016-03-27 23:38:11
【问题描述】：

我正在使用 Ionic 并尝试制作带有验证的登录表单，但是如何在输入框的占位符中显示错误消息而不是使用 ng-show？此外，如果输入框无效，如何更改另一个元素的 CSS？一直在网上找资料，但还是没有头绪，希望有人能帮帮我，谢谢！

【问题讨论】：

请记住，占位符只有在输入为空时才会显示。
是的，我只是想让它在用户触摸后显示“必需”

标签： javascript jquery angularjs validation ionic-framework

【解决方案1】：

Angular 使用一些额外的数据扩展了表单元素，这些数据可以通过表单访问并在模板中输入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}"。这会在之前使用的相同条件下应用“错误”类。

【讨论】：

谢谢，我是 angularJS 新手，看起来 html 有点乱？
确实如此，但那是角度模板。您可以通过执行stackoverflow.com/a/27117176 之类的操作将其中一些逻辑移至您的控制器，但如果您只是初学者，上面的答案可能更直接

【解决方案2】：

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

【讨论】：

抱歉，我更希望将其作为对您问题的评论，但还没有足够的代表级别允许这样做。
感谢回复，如何使用ng-touched来改变占位符？以及如果输入框无效如何更改另一个元素的CSS？
嗯。使用 ng-touched 作为 CSS，来自这篇 SO 帖子。 stackoverflow.com/questions/32555792/… 。占位符的一个简单解决方案可能是尝试：placeholder="Enter value here" onblur="this.placeholder='Required'" 。