カスタムエラー検証メッセージが表示されない

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

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> 

Answer 2

このメッセージはおそらくform validatenのようにブラウザから届きます。

あなたはそれを無効にするには、フォームにnovalidate属性を追加する必要があります。

<form novalidate> 

Answer 3

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

<form novalidate>は、これらのメッセージを回避するために使用することができ、あなたの問題を解決します。

oninvalidイベントが発生したときにも、setCustomValidity機能を使用してカスタムメッセージに置き換えることができます。

同様：

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

参考説明here。