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

Why ng-show,ng-message are always displaying?

本文关键字：显示 ng-message ng-show 为什么      更新时间：2023-09-26

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

<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，但它们没有按预期工作，有人可以帮助我吗？提前谢谢。

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

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

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>

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

解决方案

看起来您混淆了 2 个概念。Angular 只关心 HTML 表单和输入名称，当它应用$required、$dirty、$pristine等样式时......当您查找输入值时不会。

比较输入值时，需要引用在 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)开始，然后从那里建立你的表达......

相关文章：