角形名称作为参数传递时作为字符串传递

I'm simply trying to reset a form using the angular functions $setPristine & $setUntouched (several forms are created with ng-repeat).
I assign the form name dynamically by using the syntax {{ someName }} (the name is build on the server side and is passed as json (string)).
The name of the form is correctly assigned in the markup and validations are working as expected. The problem arrises when I pass that name as a parameter in the ng-click="reset(someName)" function.
When debugging the name comes as a string and not as the form object which causes the error. I did a quick test by hard-coding the name and pass that same name and it works fine.
My assumption is, the name coming from json is a string and the type is forwarded to the function as is, instead of the object.
So the question is: is there a way to convert that name so it is interpretated correctly by the controller. Or maybe there is something else I'm missing...

我只是尝试使用$ set质朴& $ setun的角度函数重置一个表单(几个表单是用ng-repeat创建的)。我使用语法{{someName}动态地分配表单名(该名称构建在服务器端，并作为json (string)传递)。表单的名称在标记中正确地分配，验证按预期工作。当我在ng-click=“reset(someName)”函数中将该名称作为参数传递时，问题就出现了。当调试这个名称时，它是一个字符串，而不是导致错误的表单对象。我通过硬编码名称并传递相同的名称进行了快速测试，结果很好。我的假设是，来自json的名称是一个字符串，而类型是按原样转发给函数，而不是对象。问题是，有没有办法转换这个名字，让控制器正确地解释它。或者也许还有别的东西我错过了……

Here is the markup ( notice the name of the form uses {{ resto.contactForm }} ):

这里是标记(注意表单的名称使用{resto)。contactForm } }):

<form novalidate name="{{ resto.contactForm }}" ng-submit="submit(restoContact, resto.contactForm.$valid)" class="sky-form">
  <div class="form-group">
    <label class="checkbox state-success">
      <input type="checkbox" ng-model="restoContact.sameAsUser" name="sameAsUser" id="sameAsUser" value="true" ng-click="contactAutoFill()"><i></i>Contact name is same as current user.
      <input type="hidden" name="sameAsUser" value="false" />
    </label>
  </div>
  <div class="form-group">
     <label class="control-label" for="contactName">Contact Name</label>
     <input type="text" ng-model="restoContact.contactName" name="contactName" id="contactName" placeholder="John, Doe" class="form-control" required />
       <div ng-show="{{ resto.contactForm }}.contactName.$error.required && !{{ resto.contactForm }}.contactName.$pristine" class="note note-error">Please enter a name or check the box 'Same as current user'.</div>
   </div>
   <div class="form-group">
     <label class="control-label" for="contactPhoneNumber">Contact Phone Number</label>
     <input type="text" ng-model="restoContact.contactPhoneNumber" name="contactPhoneNumber" id="contactPhoneNumber" placeholder="[phone]" class="form-control" required ng-pattern="phoneNumberPattern" />
       <div ng-show="({{ resto.contactForm }}.contactPhoneNumber.$error.required || {{ resto.contactForm }}.contactPhoneNumber.$error.pattern) && !{{ resto.contactForm }}.contactPhoneNumber.$pristine" class="note note-error">Please enter a valid phone number.</div>
    </div>
    <div class="margin-leftM19">
      <button class="btn btn-primary">Save Changes </button>
      <button class="btn btn-default" ng-click="reset(resto.contactForm)">Cancel </button>
    </div>
</form>

Here is the reset function in the controller (form comes as "contactForm1" which is the correct name but is a string and not the object):

这里是控制器中的重置函数(表单以“contactForm1”的形式出现，该名称是正确的，但是是一个字符串，而不是对象):

$scope.reset = function (form) {            
        if (form) {
            form.$setPristine();
            form.$setUntouched();
        }
        //$scope.user = angular.copy($scope.master);
    };

I have not implemented th submit method but I'm sure I will be running into the same issue. Any suggestions or advices are welcome. Thanks in advance...

我还没有实现提交方法，但是我确信我将遇到同样的问题。欢迎提出建议。提前谢谢…

Here is the fidle.js. the variable data is an exact response from the server.
[http://jsfiddle.net/bouchepat/v0mtbxep/]

这是fidle.js。变量数据是来自服务器的精确响应。[http://jsfiddle.net/bouchepat/v0mtbxep/]

SOLUTION:

http://jsfiddle.net/bouchepat/v0mtbxep/3/
I removed $setUntouched as it throws an error.

解决方案:http://jsfiddle.net/bouchepat/v0mtbxep/3/我删除了抛出错误的$ setuntouch。

2 个解决方案

#1

You can't dynamically name a <form> or <ng-form>.

不能动态地命名

或 。

Although what you want, is make the form usable in the controller. You could do the following:

尽管您想要的是使表单在控制器中可用。你可以这样做:

// in controller
$scope.form = {};
$scope.reset = function() {
    $scope.form.contact.$setPristine();
    $scope.form.contact.$setUntouched();
};

// in html
<form name="form.contact">

#2

This is happening because resto.contactForm is a string defined on the scope. The angular directive for form is just creating a variable on the scope with the same name. To get the variable by a string, use $eval. This should work:

这是因为雷斯托。contactForm是在范围上定义的字符串。形式的角指令就是在作用域上创建一个同名的变量。要用字符串获取变量，请使用$eval。这应该工作:

$scope.reset = function (formName) {            
    var form = $scope.$eval(formName);

    if (form) {
        form.$setPristine();
        form.$setUntouched();
    }
    //$scope.user = angular.copy($scope.master);
};