フォーム外の角度入力エラー状態を表示する方法

すべてのエラーメッセージをアプリケーションのヘッダーに表示する必要があります。どのように私は角度でそれを行うことができますか？私は、このアプリケーション（see on plunker）がある場合はフォーム外の角度入力エラー状態を表示する方法

：私は必要なもの

<body> 
    <div id="header"> 
     <!-- I want error messages to show up here --> 
    </div> 
    <form name="myForm"> 
     <label>Email</label> 
     <input name="myEmail" type="email" ng-model="user.email" required="" /> 
     <div ng-messages="myForm.myEmail.$error"> 
     <div ng-message="required">required</div> 
     <div ng-message="email">invalid email</div> 
     </div> 
    </form> 
    <p>Your email address is: {{user.email}}</p> 
    </body>

をheaderdivにエラーメッセージを持つことです。どうやってやるの？

出典

2016-05-20 BetaRide

固定demoここです。

はちょうどそのどこでも同じコントローラに自由にアクセスし、あなたは$ scope.myForm = [yourFormObject]取得します、あなたは<form name="myForm" >を設定するときのように、形でエラーにと同じようにアクセスします。状態を形成し、制御するために結合

表題下
Angular Form Document

形態はFormControllerのインスタンスです。フォームインスタンスは、オプションでname属性を使用してスコープにパブリッシュできます。

そして、次の2つの異なるcontroller.Inヘッダコントローラを持っているでしょうでも$scope.$watch('formName.fieldName.$error',function(nv,ov){});

// Code goes here 
 

 
var app = angular.module('plunker', ['ngMessages']); 
 
app.controller('appCtrl', function($scope) { 
 
    $scope.$watch('myForm.myEmail.$error', function(nv, ov) { 
 
    console.info(nv); 
 
    }, true); 
 
});

/* Styles go here */ 
 

 
hr { 
 
    margin: 20px 0; 
 
}

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="appCtrl"> 
 
    <div id="header"> 
 
    <div ng-show="myForm.myEmail.$error.required">required</div> 
 
    <div ng-show="myForm.myEmail.$error.email">invalid email</div> 
 
    </div> 
 
    <hr /> 
 
    <form name="myForm"> 
 
    <label>Email</label> 
 
    <input name="myEmail" type="email" ng-model="user.email" required="" /> 
 
    <div ng-messages="myForm.myEmail.$error"> 
 
     <div ng-message="required">required</div> 
 
     <div ng-message="email">invalid email</div> 
 
    </div> 
 
    </form> 
 
    <p>Your email address is: {{user.email}}</p> 
 
</body> 
 

 
</html>

出典

2016-05-20 14:28:31

により、コントローラで$errorにアクセスし、あなたのエラーが表示されますメッセージ。

コントローラーがどちらでも通信します$rootScope or service

出典

2016-05-20 14:41:04

フォーム外の角度入力エラー状態を表示する方法

答えて

関連する問題