AngularJS: 동적으로 추가된 필드가 FormController에 등록되지 않았습니다.

AngularJS: 동적으로 추가된 필드가 FormController에 등록되지 않았습니다.

Angular에는 다음과 같은 정적 형식이 있습니다.JS:

<form name="myForm" class="form-horizontal">

  <label>First Name:</label>
  <input type="text" name="first_name" ng-model="entity.first_name">

  <label>Last Name:</label>
  <input type="text" name="last_name" ng-model="entity.last_name">

</form>

Angular는 FormController를 생성하여 스코프에 게시합니다(양식 이름).즉, 다음과 같은 자산에 액세스할 수 있습니다.

$scope.myForm.first_name.$error
$scope.myForm.last_name.$invalid
...

이거 정말 유용하네요!

하지만 제 경우 디렉티브를 사용하여 동적으로 폼을 작성하고 있습니다.

<form name="myForm" class="form-horizontal">

  <field which="first_name"></field>
  <field which="last_name"></field>

</form>

그<field>지시문은 실제와 일치하지 않는다<input>(서버에서 데이터를 가져오고 지시문을 링크하는 등) 잠시 후까지 요소를 선택합니다.

여기서 문제는 동적 필드가 FormController에 등록되지 않은 것처럼 폼 컨트롤러에 필드 속성이 정의되어 있지 않다는 것입니다.

// The following properties are UNDEFINED (but $scope.myForm exists)
$scope.myForm.first_name
$scope.myForm.last_name

왜 그런지 추측이라도?솔루션/회피책이 있습니까?

이 jsFiddle에서는 코드 전체를 확인할 수 있습니다.
http://jsfiddle.net/vincedo/3wcYV/

업데이트 2015년 7월 31일 1.3 이후 수정되었습니다.여기를 참조해 주세요.https://github.com/angular/angular.js/issues/1404#issuecomment-125805732

원래 답변 안타깝게도 Angular의 짧은 답변입니다.지금은 JS입니다.Angular의 양식 검증은 동적으로 명명된 필드에서는 작동하지 않습니다.HTML 하단에 다음 항목을 추가하여 정확히 무슨 일이 일어나고 있는지 확인할 수 있습니다.

<pre>{{myForm|json}}</pre>

보시다시피 Angular는 동적 입력 이름을 제대로 얻지 못했습니다.현재 네스트된 양식에 대한 작업이 진행 중인데, 좀 더 많은 작업을 하면 문제가 없이 부모 양식을 제출할 수 있습니다.

필요에 따라서, 이 문제에 대한 서포트를 한층 더 입수할 수 있습니다.GitHub 문제 - 동적 요소 유효성 검사.어느 쪽이든, 코드는 다음과 같습니다.

http://jsfiddle.net/langdonx/6H8Xx/2/

HTML:

<div data-ng-app>
    <div data-ng-controller="MyController">
        <form id="my_form" name="my_form" action="/echo/jsonp/" method="get">
            <div data-ng-repeat="field in form.data.fields">
                <ng-form name="form">
                    <label for="{{ field.name }}">{{ field.label }}:</label>
                    <input type="text" id="{{ field.name }}" name="{{field.name}}" data-ng-model="field.data" required>
                    <div class="validation_error" data-ng-show="form['\{\{field.name\}\}'].$error.required">Can't be empty.</div>

                </ng-form>
            </div>
            <input type="submit" />
        </form>
    </div>
</div>

JavaScript:

MyController.$inject = ["$scope"];

function MyController($scope) {
    $scope.form = {};
    $scope.form.data = {};
    $scope.form.data.fields = []

    var f1 = {
        "name": "input_1",
        "label": "My Label 1",
        "data": ""
    };
    var f2 = {
        "name": "input_2",
        "label": "My Label 2",
        "data": ""
    };

    $scope.form.data.fields.push(f1);
    $scope.form.data.fields.push(f2);
}

저도 비슷한 문제에 부딪혔는데, 이 문제를 해결하기 위해 한 일은 $compile을 템플릿에 호출하기 전에 필드 이름을 입력하는 것이었습니다.간단한 string.replace가 성공했습니다.다시 말씀드리지만, 필드 템플릿을 http를 통해 가져오고 템플릿 텍스트에 액세스할 수 있었기 때문에 가능했습니다.

update: 여기 당신의 예제를 작동시키기 위한 약간의 해킹이 있는 바이올린입니다.

app.directive('field', function($compile) {
    var linker= function(scope, element){

    var template = '<input type="text" name="{{fname}}" ng-model="model">'
    .replace('{{fname}}', scope.fname);
        element.html(template)
        $compile(element.contents())(scope)
    }
  return {
    restrict: 'E',
    scope: {
      fname: '=',
      model: '='
    },

    replace: true,
      link: linker
  };
});

http://jsfiddle.net/2Ljgfsg9/4/

언급URL : https://stackoverflow.com/questions/15843765/angularjs-fields-added-dynamically-are-not-registered-on-formcontroller