1

我正在与角度指令中的验证作斗争，但没有成功。

当我将 name 属性提交给指令模板时，form.name.$error 对象似乎未定义。如果我在模板中使用固定的名称属性，则 $error 对象很好，但所有元素当然相同。

html是：

 <form name="form" novalidate>

<p>
  <testvalidation2 name="field1" form="form"  field="testfield4" required="true"> 
  </testvalidation2>
</p>
</form>

该指令如下所示：

app.directive('testvalidation2', function(){
return {
restrict: 'E',
scope: {
  ngModel: '=',
  newfield: '=field',
  required: '=required',
  form: '='
},
templateUrl: 'template2.html',
link: function(scope, element, attr){
 scope.pattern = /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;
 scope.name = attr.name;
}

} // 返回 });`

最后是模板：

<div>
<input  name="{{name}}" type="text" ng-model="newfield" ng-required="required" ng-pattern="pattern"> {{FIELD}}</input>
<span ng-show="form.name.$error.required">Required</span>
<span ng-show="form.name.$error.pattern"> Invalid </span>
<p>Output {{form.name.$error | json}}</p>
</div>

我为我的Angular Validation Problem创建了一个 plunker ，如果有人能帮助我赢得战斗，我会很高兴。

迈克尔

4

1 回答 1

1

我没有解决这个问题，但我可以告诉你问题是什么。

  • 首先在您的 html 中form="form"应该有表单的名称form="form2"。
  • 其次，由于您在指令中创建了一个新范围，因此创建的范围是一个独立的范围，它不会从父范围继承，这意味着input您添加的模板控件不会添加到父范围form2。

目前我能想到的唯一出路是不使用隔离范围。

于 2013-09-20T09:08:30.287 回答