Question

我有以下内容：

html代码，它基本上只是一个名为regForm的表单中的两个输入字段：

<div>
   <label for="regName">
      <span>Name</span>
      <span class="error" 
         ng-show="regCheckNamesMessage">{{regCheckNamesMessage}}</span>
  </label>
  <div>
     <span class="inputIcon"><i class="fa fa-fw fa-user"></i></span>
     <input autocomplete="off"
         id="regFirstName"
         name="regFirstName"
         ng-change="regCheckNames(regForm.regFirstName, regForm.regLastName)"
         ng-model="regFirstName"
         ng-required="true"
         ng-minlength="2"
         placeholder="First Name"/>
     <input autocomplete="off"
         id="regLastName"
         name="regLastName"
         ng-change="regCheckNames(regForm.regFirstName, regForm.regLastName)"
         ng-model="regLastName"
         ng-required="true"
         ng-minlength="2"
         placeholder="Last Name"
         type="text" />
  </div>
</div>

我有以下javascript代码，可以检查必填字段：

regCheckNames = (regFirstName, regLastName) => {   
   if (regFirstName.$dirty == true && regLastName.$dirty == true) {
        if (regFirstName.$error.required == true && regLastName.$error.required == true) {
            this.regCheckNamesMessage = "Both are required";
        } else {
            this.regCheckNamesMessage = "";
        }
    }

    if (regFirstName.$dirty == true && regLastName.$dirty == false) {
        if (regFirstName.$error.required == true)
            this.regCheckNamesMessage = "First name is required";
        else
            this.regCheckNamesMessage = "";
    }

    if (regFirstName.$dirty == false && regLastName.$dirty == true) {
        if (regLastName.$error.required == true)
            this.regCheckNamesMessage = "Last name is required";
        else
            this.regCheckNamesMessage = "";
    }
}

不知何故，检查代码的运行方式与我预期的方式不同。我希望只要用户在触摸字段后将两个字段留空，就会显示错误Both are required，当用户触摸第一个名称字段时将错误First name is required留空，依此类推。有人能指出我正确的方向吗？

Answer 1

你需要它是一个if else。否则，当两个字段都变脏时，第三条错误消息将覆盖先前的错误。

regCheckNames = (regFirstName, regLastName) => {   
   if (regFirstName.$dirty == true && regLastName.$dirty == true) {
        if (regFirstName.$error.required == true && regLastName.$error.required == true) {
            this.regCheckNamesMessage = "Both are required";
        } else {
            this.regCheckNamesMessage = "";
        }
    } else if (regFirstName.$dirty == true && regLastName.$dirty == false) {
        if (regFirstName.$error.required == true)
            this.regCheckNamesMessage = "First name is required";
        else
            this.regCheckNamesMessage = "";
    } else if (regFirstName.$dirty == false && regLastName.$dirty == true) {
        if (regLastName.$error.required == true)
            this.regCheckNamesMessage = "Last name is required";
        else
            this.regCheckNamesMessage = "";
    }
}

Answer 2

我不确定您使用的角度版本，但您可能需要查看ngMessages和form指令。这是显示错误消息的正确方法。

您可以使用以下内容：

<div ng-messages="myForm.regFirstName.$error" role="alert">
    <div ng-message="required">First name is required</div>
  </div>
<div ng-messages="myForm.regFirstName.$error && myForm.regLastName.$error" role="alert">
    <div ng-message="required">Both are required</div>
</div>

您可以查看here

客户端错误检查不起作用

2 个答案: