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

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>可用于避免这些消息。

但是，如果发生setCustomValidity事件，您还可以使用oninvalid功能将其替换为您的自定义消息。

像：

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

有用的解释here。

Answer 4

Working 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>