Question

我试图弄清楚如何使用基于按钮点击的ng-message。我发现的大多数文档都会根据输入而不是按钮自动显示错误消息。我会更改什么，以便在点击按钮后显示ng-messages。这是我的代码

<div ng-controller="userController"> 
    <div class=user>
        <form name="login">
            <h2 class>Login</h2>
            <h3 class = "login_page">UserName</h3>
            <input ng-model="user" type="text" ng-minlength="1" required>
            <h3 class = "login_page">Password</h3>
            <input ng-model="password" type="password" name="password" ng-minlength="4" required>
            <input type="submit" value="Login" ng-click="login()" >
            <div ng-messages="login.password.$error" style="color:maroon" role="alert">
                <div ng-message="required">You did not enter a field</div>
                <div ng-message="minlength">Your field is too short</div>
            </div>
        </form>
    </div>
</div>

Answer 1

您可以使用ngIf：

在表单控制器上使用$ submitted标志

<div ng-if="login.$submitted" ng-messages="login.password.$error" style="color:maroon" role="alert">
  <div ng-message="required">You did not enter a field</div>
  <div ng-message="minlength">Your field is too short</div>
</div>

Answer 2

您可以使用ng-show $submitted ng-form属性的ng-show="login.$submitted"指令

将此添加到您的代码<input type="submit" value="Login" ng-click="login()" > <div ng-show="login.$submitted" ng-messages="login.password.$error" style="color:maroon" role="alert"> <div ng-message="required">You did not enter a field</div> <div ng-message="minlength">Your field is too short</div> </div>

    <div ng-messages="login.password.$error" style="color:maroon" role="alert">
        <div ng-show="login.$submitted" ng-message="required">You did not enter a field</div>
        <div ng-show="login.$submitted" ng-message="minlength">Your field is too short</div>
    </div>

你可以看到一个工作小提琴here。希望这会有所帮助

或者为每条消息添加show

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.


        var imageNames = ["giphy-1 .jpg","giphy-2 .jpg", "giphy-3 .jpg", "giphy-4 .jpg", "giphy-5 .jpg"]

        var images = [UIImage]()


        for i in 0..<imageNames.count{

                images.append(UIImage(named: imageNames[i])!)

        }

        theGif.animationImages = images
        theGif.animationDuration = 1.0
        theGif.startAnimating()

使用按钮进行ng-messages验证

2 个答案: