如何在表单输入有效时显示消息？

Question

我很难在输入有效时显示消息。要显示错误消息，它工作正常。这就是我正在尝试的：

<form>
...
<div class="form-group">
                    <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
                    <div class="col-xs-10">
                        <input type="text" id="inputUser" name="usernameInput" class="form-control textbox" 
                               placeholder="Digite seu Username" width="25" ng-model="username.value" 
                               ng-minlength="4" ng-maxlength="10" valid="validateForm.usernameInput.$valid" required>
                        <div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
                            <div class="error-message" ng-message="required">*This field is required</div>
                            <div class="error-message" ng-message="minlength">*Username too short</div>
                            <div class="error-message" ng-message="maxlength">*Username too long</div>
                        </div>
                        <div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$valid">
                            <div class="valid-message" ng-message="valid">valid!</div>
                        </div>
                    </div>
                </div>

</form

我也尝试使用 $valid ng-model 设置 "ng-message" 但无济于事。有什么建议吗？

Answer 1

向输入标签添加 "required" 属性

否则为了避免通过检查工具进行操作，PHP 有效，

if(空($_POST['usernameInput'])) { 回声 "Error!" }

Answer 2

您可以简单地使用 ng-if 和 validateForm.usernameInput.$valid 来控制显示 valid messages。提到这个块应该放在 ng-message 块之外。

<div ng-if="validateForm.usernameInput.$valid">
  valid!
</div>

PLUNKER DEMO

评论：您在 form 标签处遗漏了 validateForm，我认为这是打字错误。

Answer 3

您的表单未命名
ng-messages 的值应该是包含您要验证的 property/properties 的对象。例如 input.$error 在您的情况下可以有 required、minlength 或 maxlength。它与 $valid 不同，因为它具有 true/false 值，因此我们检查对象 usernameInput 上的属性 $valid for true/false
ng-message 的值应该是属性的名称，以检查包含块的 ng-messages 值对象。如果属性的值是真实的，你会看到内容，如果它是虚假的，你就不会。
ng-messages/ng-message 可能不是您的情况的正确解决方案，因为您正在检查一个值并显示一条消息。

TLDR

ng-messages : 对象名称*
ng-message : 属性对象的名称*
如果属性的值是真实的，ng-message 的内容显示...虚假的，什么都不显示。

angular.module('formDemo', ['ngMessages']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular-messages.js"></script>

<body ng-app="formDemo">
  <form name="validateForm">
    ...
    <div class="form-group">
      <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
      <div class="col-xs-10">
        <input 
        type="text" 
        id="inputUser"
        name="usernameInput"
        class="form-control textbox"
        placeholder="Digite seu Username"
        width="25"
        ng-model="username.value"
        ng-minlength="4"
        ng-maxlength="10"
        required>
        <div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
          <div class="error-message" ng-message="required">*This field is required</div>
          <div class="error-message" ng-message="minlength">*Username too short</div>
          <div class="error-message" ng-message="maxlength">*Username too long</div>
        </div>
        <div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput">
          <div class="valid-message" ng-message="$valid">valid!</div>
        </div>
      </div>
    </div>

  </form>
</body>

如何在表单输入有效时显示消息？

How to display a message when a form input is valid?

angularjs

ng-messages