Question

我有一个动态表单，我想解决输入错误。输入名称是动态创建的，但我无法在错误范围内访问它。我假设角度双花括号执行/渲染比ngIf指令慢？也许这就是为什么我无法访问 innerForm.inputName （这是'名称'）...有什么建议吗？

Live code

HTML

<div ng-app='app' ng-controller='Main'>

  <form name='mailForm' ng-submit='submit(mailForm.$valid,form);$event.preventDefault();' novalidate>
    <ng-form name='innerForm'>
      <p>
        Name:
        <input type='text' name='{{inputName}}' ng-model='form.name' required>

        <span ng-if="innerForm.inputName.$invalid && innerForm.inputName.$touched">required</span>
      </p>
    </ng-form>

    <br><br>
    <input type="submit" value='Submit' ng-disabled="mailForm.$invalid" />
  </form>
</div>

的Javascript

angular.module('app',[])
 .controller('Main', function($scope){
   $scope.inputName = 'name';

   $scope.submit = function(isValid, form){
    console.log('isValid',isValid);
    console.log('form',form);
   };
});

Answer 1

回答编辑

由于值是动态变化而您永远不知道inputName值是什么，您仍然可以通过按键选择来访问范围对象，因此范围错误行应如下所示：

<span ng-if="innerForm[inputName].$invalid && innerForm[inputName].$touched">required</span>

由于您在输入name='{{inputName}}'

中使用范围值

并且在ng中 - 如果您尝试阅读innerForm.inputName

因此，在您的控制器中，您应该设置$scope.inputName = 'inputName';

有$scope.inputName = 'name';时，您会在name

中读取innerFrom的值

修改的

另外考虑到你已经禁用了提交按钮，当表单无效时，所以是的，它不会让你提交，直到你填写表格并且它变得有效

Answer 2

更改

<input type='text' name='{{inputName}}' ng-model='form.name' required>

到

<input type='text' name='inputName' ng-model='form.name' required>

差异：{{inputName}}到inputName

name属性必须是纯文本。如果要使用括号，请在控制器中将inputName范围变量设置为“inputName”，因为您尝试将其作为innerForm.inputName.$invalid进行访问。 inputName属性与表单上名称字段中的字符串非常匹配。

如何以动态角度形式处理错误输入？

2 个答案: