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

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

这条消息很可能来自您的浏览器，就像 form 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>

有用的解释here.

Answer 4

Working Plnkr

您可以在表单提交时用space 替换该特定字段的HTML5 验证消息。它将阻止显示消息并且不会影响其他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>