javascript - Angularjs 中的动态表单名称属性 <input type ="text"name ="{{ variable-name }}"/>

Question

当动态创建“inputName”时，人们将如何使用 formName.inputName.$valid？

  <form name="formName">
    <input ng-repeat="(variable) in variables"
           type="text" name="variable.name"
           ng-model="variable.name" required />
 </form>

HTML 输入属性“name”的输出将是字符串“variablename”，它将应用于所有重复的输入。

如果我们尝试这个

<form name="formName">
  <input ng-repeat="(variable) in variables"
         type="text" name="{{ variable.name }}"
         ng-model="variable.name" required />
</form>

HTML 输入属性“name”的输出将是字符串“{{ variable.name }}”，它将应用于所有重复的输入。

在这两种情况中的任何一种情况下，都不会动态创建每个重复输入元素的名称属性；所有输入将共享相同的输入名称。如果您想根据特定名称调用特定输入，则不太好。

• 需要使用动态名称值
• 需要能够调用 $scope.formName.dynamicName.$valid
• 需要能够调用 $scope.formName.$valid
• 需要将动态名称输入字段添加到嵌套表单或主表单

Answer 1

看起来 Angular 1.3 修复了这个问题 ( https://stackoverflow.com/a/32907176/3854385 )

Angular 1.3+ 现在可以实现这一点:

<form name="vm.myForm" novalidate>
  <div ng-repeat="p in vm.persons">
    <input type="text" name="person_{{$index}}" ng-model="p" required>
    <span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
  </div>
</form>

Demo

在某些情况下，如果您可以传递信息，内部表单是一个很好的解决方案:( https://stackoverflow.com/posts/12044600/ )要解决“动态名称”问题您需要创建一个内部表单(请参阅 ng-form ):

<div ng-repeat="social in formData.socials">
      <ng-form name="urlForm">
            <input type="url" name="socialUrl" ng-model="social.url">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
            <button ng-click="doSomething(urlForm.socialUrl.$valid)">Test</button>
      </ng-form>
  </div>

另一种选择是为此编写自定义指令。

这是 jsFiddle 显示 ngForm 的用法:http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/