自定义错误验证消息未显示

Question

我在Angular中进行错误验证，如下所示。

<select ng-model = "color" class = "form-control"
    ng-options = "color as color for color in colors" required>
    <option value="">Choose an option</option> 
</select>

<span ng-show="serviceForm.color.$error.required"> My custom error message </span>

错误验证将按预期方式显示，但是自定义消息不会显示。 相反，我得到以下内容。

这看起来不错，但是如何用自定义消息替换呢？ 如果我知道它来自哪里，那就太好了，我可以对其进行编辑。

另外，如果我取出，我的自定义消息也会出现

<option value="">Choose an option</option> 

然后它总是出现。 为什么是这样？

Answer 1

该消息很可能来自您的浏览器，因为它确实是validaten形式 。

您必须将novalidate属性添加到表单中以将其禁用：

<form novalidate>

Answer 2

<select ng-model = "color" class = "form-control" name="lstColor"
    ng-options = "color as color for color in colors" data-msg-required="Please select color from list" required>
    <option value="">Choose an option</option> 
</select>

尝试以上，希望能解决您的问题

Answer 3

<form novalidate>可用于避免这些消息。

但是，当发生oninvalid事件时，也可以使用setCustomValidity函数将其替换为自定义消息。

喜欢：

<input class="form-control" type="email"  required="" placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')"></input>

有用的解释在这里 。

Answer 4

工作Plnkr

您可以将该特定字段的HTML5验证消息替换为表单提交上的space 。 这将阻止显示该消息，并且不会影响其他HTML5验证消息。

JavaScript的：

$scope.ValidateInput = function(){
    var email = document.getElementById("colorId");

    if (email.validity.valueMissing) {
        email.setCustomValidity(" ");
    } else {
        email.setCustomValidity("");
    }
  }

HTML ：

<form name='serviceForm'>
      <select name='color' id='colorId' ng-model = "color" class = "form-control"
    ng-options = "color as color for color in colors" required>
         <option value="">Choose an option</option> 
      </select>

     <span ng-show="serviceForm.color.$error.required"> My custom error message </span>
     <input type='submit' ng-click='ValidateInput()' value='Submit'>
</form>