Javascript 动态表单名称属性<；输入类型="；“文本”；名称=“名称”；{{variable name}}"/&燃气轮机；在Angularjs

当动态创建“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}”，该字符串将应用于所有重复输入

在这两种情况中，不会动态创建每个重复输入元素的name属性；所有输入将共享相同的输入名称。如果您想基于特定名称调用特定输入，那么这没有多大好处

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

---

我找不到满足部分或所有这些需求的答案。这就是我想到的
也许有更好的方法，所以请分享您的想法。
我正在使用Angularjs 1.3.0-beta.8
我有一个包含多个嵌套指令的表单，所有指令都包含输入、选择等。。。 这些元素都包含在ng repeats和动态字符串值中
以下是如何使用该指令：

<form name="myFormName">
  <nested directives of many levels>
    ex: <input ng-repeat=(index, variable) in variables" type="text"
               my-name="{{ variable.name + '/' + 'myFormName' }}"
               ng-model="variable.name" required />
    ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
                my-name="{{ variable.name + '/' + 'myFormName' }}"
        </select>
</form>

var DynamicName = function() {
    return {
        restrict: 'A',
        priority: -1,
        require: ['ngModel'],
        link: function (scope, element, attr, ngModel) {
            ngModel[0].$name = attr.name;
        }
    };
};

app.directive('dynamicName', DynamicName);

然后在$scope.myFormName中，您只需迭代对象并收集包含“hello”的任何键，就可以找到任何表单输入名称

app.directive('myName', function(){

  var myNameError = "myName directive error: "

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: 'ngModel', // ngModelController.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return } // no ngModel exists for this element

      // check myName input for proper formatting ex. something/something
      checkInputFormat(attrs);

      var inputName = attrs.myName.match('^\\w+').pop(); // match upto '/'
      assignInputNameToInputModel(inputName, ngModel);

      var formName = attrs.myName.match('\\w+$').pop(); // match after '/'
      findForm(formName, ngModel, scope);
    } // end link
  } // end return

  function checkInputFormat(attrs){
    if( !/\w\/\w/.test(attrs.rsName )){
      throw myNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName
    }
  }

  function assignInputNameToInputModel(inputName, ngModel){
    ngModel.$name = inputName
  }

  function addInputNameToForm(formName, ngModel, scope){
    scope[formName][ngModel.$name] = ngModel; return
  }

  function findForm(formName, ngModel, scope){
    if( !scope ){ // ran out of scope before finding scope[formName]
      throw myNameError + "<Form> element named " + formName + " could not be found."
    }

    if( formName in scope){ // found scope[formName]
      addInputNameToForm(formName, ngModel, scope)
      return
    }
    findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes
  }
});

app.directive（'myName'，function（）{
var mynamererror=“myName指令错误：”
返回{
restrict:'A'，//声明一个Attributes指令。
要求：'ngModel'，//ngModelController。
链接：功能（范围、要素、属性、ngModel）{
如果（！ngModel）{return}//此元素不存在ngModel
//检查myName输入的格式是否正确，例如某物/某物
checkInputFormat（属性）；
var inputName=attrs.myName.match（'^\\w+'）.pop（）；//匹配到'/'
将inputName分配给InputModel（inputName，ngModel）；
var formName=attrs.myName.match（'\\w+$）.pop（）；//在'/'之后匹配
findForm（表单名称、ngModel、范围）；
}//结束链接
}//结束返回
函数checkInputFormat（attrs）{
如果（！/\w\/\w/.test（attrs.rsName））{
throw myNameError+“格式应为\“inputName/formName\”但为“+attrs.rsName”
}
}
函数AssignInputName到InputModel（inputName，ngModel）{
ngModel.$name=inputName
}
函数addInputNameToForm（formName、ngModel、scope）{
作用域[formName][ngModel.$name]=ngModel；返回
}
函数findForm（formName、ngModel、scope）{
如果（！scope）{//在找到作用域[formName]之前超出了作用域
无法找到名为“+formName+”的throw myNameError+”元素
}
if（范围中的formName）{//找到范围[formName]
addInputNameToForm（formName、ngModel、scope）
返回
}
findForm（formName，ngModel，scope.$parent）//递归搜索$parent作用域
}
});

这应该可以处理许多您不知道表单将在哪里的情况。或者您有嵌套表单，但出于某种原因，您希望将此输入名称附加到两个表单上？好的，只需传入要将输入名称附加到的表单名称
我想要的是一种将动态值分配给我永远不知道的输入的方法，然后只调用$scope.myFormName.$valid
这可能有点过头了，1.3+中存在更好的解决方案。我在过去的时间里找不到它。这对我现在有用

---

祝你好运！希望这有助于某人
不要忘记，您可以使用带有字符串索引的数组表示法访问javascript对象。给定以下任意表单定义对象：

$scope.form_def = {
  form_name : 'BallForm',
  variables : [
    height : { name : 'Height', type : 'text' },
    width : { name : 'Width', type : 'text' },
    color : { name : 'Color', type : 'multi', options : ['red', 'green', 'blue'] }
  ]
};
$scope.form_values = {};

。。。还有html代码片段

<form name="{{ form_def.form_name }}">
  <div ng-repeat="variable in form_def.variables">
    <input ng-if="variable.type==='text'" type="text" name="{{ variable.name }}" ng-model="form_values[variable.name]">
    <select ng-if="variable.type==='multi'" name="{{ variable.name }}" ng-model="form_values[variable.name]">
      <option ng-repeat="opt in variable.options" value="{{ opt }}">{{ opt }}</option>
    </select>
  </div>
</form>

{{opt}}

然后，在控制器内部，每个字段都有一个很好的form_values对象，您可以通过迭代form_def.variables散列中的键来访问它

---

在我看来，一旦你开始编写这些通用的表单处理脚本，你就会有更多的麻烦，最终你会得到大量的意大利面代码，你可能会选择一个不太通用的解决方案，但这是另一个问题。
看起来像Angular 1.3解决了这个问题（）
现在，使用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>

输入一个名称

在某些情况下，如果您只需传递信息，则内部表单是一个很好的解决方案：（） 要解决“动态名称”问题，您需要创建一个内部表单（请参见）：

<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>

URL错误
试验

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

---

下面是JSFIDLE，它展示了ngForm的用法：
使用angular 1.2.7为我工作
指令：

<form name="myFormName">
  <nested directives of many levels>
    ex: <input ng-repeat=(index, variable) in variables" type="text"
               my-name="{{ variable.name + '/' + 'myFormName' }}"
               ng-model="variable.name" required />
    ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
                my-name="{{ variable.name + '/' + 'myFormName' }}"
        </select>
</form>

var DynamicName = function() {
    return {
        restrict: 'A',
        priority: -1,
        require: ['ngModel'],
        link: function (scope, element, attr, ngModel) {
            ngModel[0].$name = attr.name;
        }
    };
};

app.directive('dynamicName', DynamicName);

如何使用：

<div ng-repeat="phone in hrModel.phones">
    <input type="text"
           name="phones[{{$index}}]"
           ng-model="phones[$index]"
           dynamic-name
    />
</div>

肯定对我的情况有所帮助。我做了一个小小的修正：在

checkInputFormat

函数中，你应该检查

attrs.myName

。哦，顺便问一下，AngularJS 1.3+中有什么更好的解决方案？我还没有找到。我会继续查找。希望这有帮助：ng show=“vm.myForm['person{{$index}}].$invalid”应该是ng show=“vm.myForm['person}+$index]。$invalid”它需要一个计算结果为字符串的表达式，而不是字符串，这意味着这两个表达式将是等价的，对吗？还是第一个选项出现了错误？（我用的是Angular 1.x，所以它肯定能用。如果你在2.x上，他们可能已经改变了它的计算方式。）Angular 1.x这是Angular文档中的一个plunkr，修改为使用我建议的方法，这是一个使用插值方法的plunkr，你可以看到