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

我还尝试设置＆＃34; ng-message＆＃34;使用$ valid ng-model但无济于事。有什么提示吗？

Answer 1

添加＆＃34;必需＆＃34;属性为输入标记

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

如果（空（$ _ POST [＆＃39; usernameInput＆＃39;]）） { echo＆＃34;错误！＆＃34; }

Answer 2

您可以使用ng-if与validateForm.usernameInput.$valid一起控制显示valid messages。请注意，此块应放在ng-message块之外。

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

<强> PLUNKER DEMO

评论：您在validateForm标记上错过了form，我认为这是错字。

Answer 3

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

TLDR

ng-messages：对象名称*
ng-message：对象*的属性名称
如果财产的价值是真实的，ng-message的内容显示......假，没有任何显示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: