角度1.5のコンポーネントからフォームを検証する

Question

角度1.5のコンポーネントとしてフォームを作成したいと思います。この後、私は別の場所でコンポーネントを再利用したい（同じページに2回も）。

私の問題は、コンポーネントのフォームの検証方法です。私はフォームの名前を追加しようとしましたが、同じHTMLページで同じ名前を使用すると表示されていたものから問題が発生します。ここで

は私plunker

ng-click="myFormName.$valid && viewModel.doSomething()" 

---

である私は私の質問を言い換えますと、私は私の全体のアプリと私は何を達成したいを表示するには、私のplunkerを変更しました。 link。

個々の入力は、必須でもなくてもよいコンポーネントです（plunkerからのcustomInputを参照）。 これらのコンポーネントは汎用パネルで使用されます。 （plunkerのcustomPanelを参照してください）。

次の2つのアクションパネルで見ることができます：

1）は、送信ボタンを - 場合に必要な要素が満たされていない、

を埋められていなければならないものをユーザーに伝えるために何かを表示するブラウザ2）アクションのある写真 - 私の質問は：どのように私は提出アクションと同様の何かを行うことができますか？私は、同じユーザーエクスペリエンス（ブラウザーにユーザーに何を記入するかを知らせる何かを表示します）か、パネルが正しく塗りつぶされていないことを示す何かを表示したいです。

Answer 1

コンポーネントには分離スコープがあります。コンポーネントでは、フォームコントローラが分離スコープにアタッチされます。つまり、各フォームが独自のスコープにあるため、同じ名前の「複数の」フォームを使用できます。

フォームコントローラを取得するには、コンポーネントコントローラでフォームコントローラをバインドします。

angular.module('test').component('myComponent', { 
template: '<div class="panel-group">' + 
     ' <div class="panel panel-primary">' + 
     ' <form name="myFormName" ng-submit="viewModel.doSomething()" ng-cloak> ' + 
     '  <input type="text" required /> ' + 
     '  <button type="button" ng-click="myFormName.$valid && viewModel.doSomething()">Another submit action </button>' + 
     '  <button type="submit">Submit Me ! </button>' + 
     '  current value = {{viewModel.count}} '+ 
     ' </form>' + 
     ' </div> ' + 
     '</div>', 

bindings: { 
    formCtrl: '=' 
}, 

controllerAs : 'viewModel', 

controller : function(){ 

    var model = this; 
    model.formCtrl = model.myFormName; // This will bind your inner form controller to the outside binding property 
    model.count = 0; 

    model.doSomething = function(){ 
    model.count = model.count + 1; 
    } 

} 

}）;

"formCtrl"バインディングプロパティにバインドすることで、外部スコープからフォームコントローラにアクセスできます。