Question

我有一个表格供用户添加条目。 Fiels，如Id，Title，Genre，Rating。

我只需要控件在用户单击控件时显示示例消息（即控件处于活动状态时）。当用户将字段留空时，我已完成验证。

我控制之一的当前代码

<div class="form-group">
                    <label for="title" class="col-sm-2 control-label">Title</label>
                    <div class="col-sm-10">
                        <input type="text" ng-model="MovieTitle" class="form-control" name="MovTitle" ng-pattern="/^[a-zA-Z0-9 ]*$/" placeholder="Movie Title" required title="Enter Movie Title" />
                    </div>
                    <span style="color:red" ng-show="adduserform.MovTitle.$dirty && adduserform.MovTitle.$invalid">
                        <br />
                        <span ng-show="adduserform.MovTitle.$error.required" class="spnmsg">Field must not be empty</span>
                        <span ng-show="adduserform.MovTitle.$error.pattern" class="spnmsg">No Special Characters Allowed</span>
                    </span>
                </div>

所以在这里我怎样才能让用户弹出一个低于我的控件（标题）的div，并带有

的消息

“示例：钢铁侠/蜘蛛侠/阿凡达”

和div在他离开控件时被隐藏。同时它不应该违反我的验证码，我也在上面编码...

到目前为止，我的验证消息在

时触发

*用户在输入和删除后将字段留空

*用户尝试输入特殊的Characs

希望我已经清除了我的想法......请帮助我

Answer 1

您可以将ng-focus和ng-blur用于所需内容。

<div class="form-group">
     <label for="title" class="col-sm-2 control-label">Title</label>
     <div class="col-sm-10">
          <input type="text" ng-model="MovieTitle" class="form-control" 
               name="MovTitle" ng-pattern="/^[a-zA-Z0-9 ]*$/" 
               ng-focus="inputFocused=true" ng-blur="inputFocused=false"
               placeholder="Movie Title" required title="Enter Movie Title" />
     </div>
     <span style="color:red" ng-show="inputFocused">
      //your message goes here                   
     </span>
</div>

如何在html / angular中激活控件时启用消息

1 个答案: