Question

我遇到了一个非常简单的问题。我在插入不正确的值时试图在表单中显示错误消息;奇怪的是我在网上搜索我做的事情是正确的，但我所有的消息总是显示出来。这是代码：

<form name="regForm" ng-controller="loginController as ctrl">
    <fieldset>
        <legend> Registration Form </legend>
        <div>
            <label for='name' > Name </label>
            <input id='name' name='name' ng-model="form.name" type="text" required ng-minlength="3">
            <div ng-messages="regForm.name.$error" 
                 ng-if="regForm.name.$dirty">
                <div ng-message="required">This field is required</div>
                <div ng-message="minlength">This field must be over 3 characters</div>
            </div>

        </div>
         <div>
            <label for='surname' > Surname </label>
            <input id='surname' name='surname' ng-model="form.surname" type="text" required ng-minlength="3" >
        </div>
         <div>
            <label for='personalId' > Personal badge id </label>
            <input id='personalId' name='personalId' ng-model="form.id" type="text" required>
        </div>
        <div>
            <label for='email'> E-mail </label>
            <input id='email' name='email' ng-model="form.mail" type="email" required>
        </div>
         <div>
            <label for='emailOK' > Confirm e-mail </label>
            <input id='emailOK' name='emailOK'ng-model="form.mail2" type="email" ng-match="form.mail" >
          <span ng-show="(regForm.email.$modelValue !== regForm.emailOK.$modelValue) 
            && regForm.email.$touched
            && !regForm.emailOK.$error.required">Email does not match.</span>
        </div>
        <div>
            <label for='pwd'> Password </label>
            <input id='pwd' name='pwd' ng-model="form.password" type="password" >
        </div>
         <div>
            <label for='pwdOK' > Confirm password </label>
            <input id='pwdOK' name='pwdOK' ng-model="form.password2" type="password" ng-pattern="form.password" >
            <span ng-show="regForm.pwdOK.$error.pattern">Passwords have to match!</span>
        </div>


        <input type='button' value='submit' ng-click="check(this)" style='margin-left: 90px'>

我尝试了ng-show，ng-message但他们没有按预期工作，有人可以帮助我吗？先谢谢。

Answer 1

很抱歉没有足够的声誉，所以我将其作为答案发布。

在将对象分配给表单成员之前，需要初始化对象

JavaScript

angular.module('somemodule').controller('LoginCtrl', function ($scope) {
    $scope.testForm = {};
}

<强> HTML

<form name="testForm" ng-controller="LoginCtrl">
    <div>
        <label for='surname' > Surname </label>
        <input id='surname' name='surname' ng-model="testForm.surname" type="text" required ng-minlength="3" >
    </div>
    <span ng-show="testForm.surname.$valid">Oh! Your surname seems good</span>
</form>

建议对象名称与表单名称相同，以免弄乱。

Answer 2

解决方案

看起来你有2个概念混淆了。在为$required，$dirty，$pristine等应用样式时，Angular仅关注HTML表单和输入名称...而不是在查找输入值时。< / p>

比较输入值时，需要引用ng-model指令中的内容。

删除$modelValue
修正参考错误

您将输入元素绑定到form.mail2和form.mail。

替换为

<span ng-show="(form.mail !== form.mail2) && regForm.email.$touched && !regForm.emailOK.$error.required">Email does not match.</span>

我给你的建议......

你可能想从ng-show="(form.mail !== form.mail2)开始，然后从那里建立你的表达......

为什么ng-show，ng-message总是显示？

2 个答案:

解决方案

我给你的建议......