Угловая проверка формы: что такое правильный синтаксис для $ valid, если имя формы исходит из модели?

Question

Прежде всего, здесь plunker: http://plnkr.co/edit/AAWNfna43rHtpjZ7PG4L?p=preview

Есть 2 формы, имя-формы первого исходит от модели и название формы второго написано непосредственно в окне просмотра.

Первый один не работает:

{{ formName.$valid }} 

второй работы:

Как это правильный синтаксис для форм с именами динамически?

Это обе формы:

<div class="formBox"> 
    <ng-form name="{{formName}}"> 
     <input name="{{inputName}}" ng-model="myInput1" required> Required Input Field 
    </ng-form> 
    <span class="el">Form-Valid: {{ formName.$valid }}</span> 
    <span class="el">Input-Valid: {{ formName.inputName.$valid }}</span> 
    </div> 


    <div class="formBox"> 
    <ng-form name="myForm2"> 
     <input name="myInput2" ng-model="myInput2" required> Required Input Field 
    </ng-form> 
    <span class="el">Forum-Valid: <strong>{{ myForm2.$valid}}</strong></span> 
    <span class="el">Input-Valid: <strong>{{ myForm2.myInput2.$valid}}</strong></span> 
    </div> 

Answer 1

Всякий раз, когда форма конкретизируется, он создает и экземпляр FormController, который публикуется в $scope с помощью атрибута name. Однако, поскольку вы используете динамические имена, это приводит к тому, что вы уже имеете примитив на $scope, который не может быть заменен объектом FormController.

Одним из способов решения этой проблемы заключается в использовании ng-init изолировать FormController объекта с использованием синтаксиса кронштейна (в данном случае, this является ссылкой на $scope), и назначить эту форму уникального имя. Обратите внимание на использование синтаксиса скобки для свойства поля ввода.

$scope.setForm = function(form) { 
    $scope.theForm = form; 
    console.log($scope.theForm); 
}; 

<ng-form name="{{formName}}"> 
    <div ng-init="setForm(this[formName])"></div> 
    <input name="{{inputName}}" ng-model="myInput1" required>Required Input Field 
</ng-form> 
<span class="el">Form-Valid: {{ theForm.$valid }}</span> 
<span class="el">Input-Valid: {{ theForm[inputName].$valid }}</span> 

http://plnkr.co/edit/BRf2Fz00rYLszFzb8kjo?p=preview

Зная this, вы можете также ссылаться на объект непосредственно с помощью синтаксиса кронштейн с $scope:

<ng-form name="{{formName}}"> 
    <input name="{{inputName}}" ng-model="myInput1" required>Required Input Field 
</ng-form> 
<span class="el">Form-Valid: {{ this[formName].$valid }}</span> 
<span class="el">Input-Valid: {{ this[formName][inputName].$valid }}</span> 

http://plnkr.co/edit/MB8SkVbWw0cl7GqWcbpC?p=preview