カスタムエラーを表示するngMessage

In this plunk目的は、内蔵のrequiredまたはmin-lengthの代わりに、コントローラの検証に基づいてエラーメッセージを表示することです。 ng-message-expが設定されていると、メッセージエラーは表示されません。どのようにこの作品を作るためのアイデア？カスタムエラーを表示するngMessage

HTML

<body ng-app="ngMessagesExample" ng-controller="ctl"> 

    <form name="myForm" novalidate ng-submit="submitForm(myForm)"> 
    <label> 
     This field is only valid when 'aaa' is entered 
     <input type="text" 
      ng-model="data.field1" 
      name="field1" /> 
    </label> 
    <div ng-messages="myForm.field1.$error" style="color:red"> 
     <div ng-message-exp="validationError">this is the error</div> 
    </div> 

    <br/><br/> 
    <button style="float:left" type="submit">Submit</button> 
</form>

Javascriptを

var app = angular.module('ngMessagesExample', ['ngMessages']); 

app.controller('ctl', function ($scope) { 

    $scope.submitForm = function(form) { 

    if (form.field1.$modelValue != 'aaa') { 
     $scope.validationError = true; 
     console.log('show error'); 
    } 
    else { 
     $scope.validationError = false; 
     console.log('don\'t show error'); 
    } 
    }; 


});

出典

2016-02-15 ps0604

あなたは物事を過度に複雑しているように見えます。なぜフォーム要素の '$ modelValue'をリッピングするのはどうですか？ 'ng-model'の' $ scope.data.field1'をチェックするだけではどうですか？ – ryanyuyu

でも、エラーメッセージは表示されません。 – ps0604

あなたの主なng-messages引数はmyForm.field1.$errorに結ばれていますが、実際にform.field1.$errorにエラーを追加することはありません。

if ($scope.data.field1 != 'aaa') { 
    form.field1.$error.validationError = true; 
} 
else { 
    form.field1.$error.validationError = false; 
}

はその後、あなただけng-messageディレクティブは、その作業を行うことができます。だからあなたのコントローラでは、ちょうど$errorオブジェクト自体を設定します。 ng-messageを提供する子要素は、親のプロパティとしてすでに評価されています（sに注意してください）。したがって、これは親がフォーム要素の$errorオブジェクトで、子要素が$error.requiredのようなプロパティまたはケース$error.validationErrorの場合に使用されます。ここng-message-expの必要なし：

<div ng-messages="myForm.field1.$error" style="color:red"> 
    <div ng-message="validationError">this is the error</div> 
</div>

Fixed plunker

出典

2016-02-15 05:12:01 ryanyuyu

コントローラでこれを行うために、より適切な方法は、それが優れたの$ setValidity

if(a !== b){ 
    form.inputName.$setValidity('custom-err', false); 
} else { 
    form.inputName.$setValidity('custom-err', true); 
} 

form.$setSubmitted();

出典

2016-10-04 09:40:40

これがうまくいかない理由についての説明を実際に追加する必要があります。コード自体にコメントと同様にコードを追加することもできます。 - 現在の形式でコミュニティの他の人があなたが解決/答えにしたことを理解するのに役立つ説明を何も提供していない。これは、より古い質問と既に回答がある質問には特に重要です。 – ishmaelMakitla

これは私のために働いた、そしてryanyuyuはしなかった。 –

とはどのような表示ですか？私は理解できない – wiwit

ドミトリーKの答えを使用することではありません。

私は答えを広げるつもりです。

//Function before show your form: 
vm.showForm(form){ 
     form.$setPristine(); 
     form.$setUntouched(); 
     form.myFieldName.$setValidity('myCustomValidationName', false); 

     //More code... 
} 

//funtion to validate field on "ng-change" 
vm.validateField(form){ 

    if(xxxx == yyy) //Make your own validation{ 
     form.myFieldName.$setValidity('myCustomValidationName', true); 
    }else{ 
     form.myFieldName.$setValidity('myCustomValidationName', false); 
    } 

}

、関連するHTMLコード：

<form name="myFormName" novalidate> 
    <md-input-container class="md-block"> 
     <label>myField</label> 
     <input ng-model="ctrl.myFieldName" name="myFieldName" ng-change="ctrl.validateField(myFormName)" /> 

     <div ng-show="myFormName.myFieldName.$touched || myFormName.$submitted"> 
      <div ng-messages="myFormName.myFieldName.$error"> 
       <div ng-message="myCustomValidationName">this is the message to show</div> 
      </div> 
     </div> 
    </md-input-container> 
</form>

出典

2017-04-04 15:46:59

カスタムエラーを表示するngMessage

答えて

関連する問題