ng-form example nesting, ng-form ejemplo anidación formularios

ng-form example nesting, ng-form ejemplo anidación formularios

by Nathaniel Anderson

HTML

<div ng-app="myApp">
    <div ng-controller="Padre1Controller">
    
    <ng-form name="outer_form">
        <repeated remove="remove($index)" ng-repeat="f in form_list">

       </repeated>
     </ng-form>

    <div ng-bind="outer_form.$error | json">
    
    </div>
     </div>
</div>

JavaScript

(function() {
    var myApp=angular.module('myApp', []);
    
    myApp.filter("prettyJSON", () => json => JSON.stringify(json, null, " "))
    
    myApp.directive('repeated', function(){
    
    var directive = {
        restrict: 'EA',
        template: `
        		<div ng-form="inner_form">
              <label>form1:</label>
              <input name="f.text" type="text" required ng-model="f.text" />
              <button ng-click="dif.remove($index)">C</button>
              <hr/>
            </div>`,
        scope: {},
        link: ()=>{},
        controller: ['$scope',($scope)=>{
        
        }],
        // note: This would be 'ExampleController' (the exported controller name, as string)
        // if referring to a defined controller in its separate file.
        controllerAs: 'dif',
        bindToController: {
	        remove : '&'
        } // because the scope is isolated
    };

		return directive;
    })
    
    
    myApp.controller('Padre1Controller', function($scope){

      $scope.remove=function($index){
        $scope.form_list.splice($index, 1);
      }
    	
      var form_list = [{},{}];
      
  		Object.defineProperty($scope, 'form_list', 
      { 
        get : function() { 
        return form_list;
        },
        set : function(v){

        }
      });
      
      
    });
    
})();