1. ホーム
  2. 質問と答え
  3. Angular JSコンポーネントを含むフォームコンテナを作成する

Angular JSコンポーネントを含むフォームコンテナを作成する

2016-06-17 10 views
0

私はAngular JS 1.5.6を使用していますが、コンポーネントのみを使用し、ディレクティブは使用しません。Angular JSコンポーネントを含むフォームコンテナを作成する

私のアプリケーションでは、フォームを5つ以上使用しています。フォームのスタイルはすべてのビューで全く同じですが、変更されるフォームの内容のみです。私はコンポーネント（入力、ボタンなど）を作っており、フォーム用のコンポーネントを作成したいと思っています。コンテナコンポーネントのようになり、別のコンポーネントを置くことができます。ビューAでは、フォームには1つのボタンと1つの入力が含まれ、ビューBには2つのボタンと2つの入力などが含まれます...しかし、それができるかどうか、どうやってダウをするのかはわかりません。私はplnkeredこれを持っています。フォームのコンポーネントを作成したいと思います。このプロジェクトでは

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

<head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script> 
    <script src="script.js"></script> 
    <script src="myInput.js"></script> 
    <script src="myButton.js"></script> 
</head> 

<body ng-controller="MyCtrl"> 
    <div class="container"> 
    <h2>My form</h2> 
    <form role="form"> 
     <my-input label="Firstname"></my-input> 
     <my-input label="Lastname"></my-input> 
     <my-button label="Submit"></my-button> 
    </form> 
    </div> 
</body> 

</html>

出典

2016-06-17 Mouss

答えて

1

二つの基本的な問題必要があります。あなたのフォームコンテナに解決する：

  • 動的なテあなたのフォームの板材

  • ハンドルサミットは、コンポーネントの外で実行する必要があります。

は私が

コードフォームコンポーネントのバインディングプロパティとしてattrsにプロパティを経由して

  • パスハンドラ関数を

    • 読むテンプレートによって二つの問題を解決：

      私たちのフォームコンテナコンポーネントのすべてのそれ

      function MyFormController($scope, $element, $attrs) { 
     var ctrl = this; 
     ctrl.summitForm = function(data) { 
     // call handler with data summited 
     var handler = ctrl.summitHandler(); 
     handler(data); 
     } 
}

      を： 

      angular.module('MyApp').component('myForm', { 
    templateUrl: function($element, $attrs) { 
     return $attrs.template; // read template file from component attribute 
    }, 
    controller: MyFormController, 
    bindings: { 
     label: '@', 
     summitHandler: '&' // call to function outside of component via this property 
    } 
    });

      はMyFormControllerでは、我々は、結合特性を経由して渡されたsummitHandler機能を呼び出すことにより、サミットイベントを処理する必要があります。

      <my-form label="Personal Info" template="myForm.html" summit-handler="ctrl.myFormHandler"></my-form>

      プロパティCTRL：

      は今、あなたはと私のフォームを追加することができます。 myFormHandlerが持つmyCtl関数ハンドリングイベントになります：年齢フィールドに

      ctrl.myFormHandler = function(data){ 
    console.log('receive test summit:' + data); 
    ctrl.dataReceived = data; 
}

      See it run here in Plunk.

      タイプする、あなたはそれがフォームの外に渡されます見ることができます。必要に応じてさらに機能を拡張してください。

    • 出典

    2016-06-17 10:30:00

    0

    ルック：

    http://kelp404.github.io/angular-form-builder/

    あなたはこの自分を実装したい場合は、動的テンプレートを作成し、それをDOMに注入される前にそれをコンパイルする必要があります。 このプロジェクトが有用であることができます。

    https://github.com/incuna/angular-bind-html-compile

    それのディレクティブが、それはあなたのためにフォーム要素（コンポーネントまたはディレクティブ）を注入し、コンパイルします：

    <div bind-html-compile="formElements.input1"></div>

    出典

    2016-06-17 08:35:42 masitko

    +0

    私たちにいくつかのコードを教えてください。 –

    関連する問題

     関連する問題