指令中的角度验证问题

Problems with angular validation in directive

本文关键字：验证 问题 指令      更新时间：2023-09-26

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

form.name.$error 对象似乎未定义，当我将 name 属性提交到指令模板时。如果我在模板中使用固定的名称属性，则$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>

我已经为我的角度验证问题创建了一个 plunker如果有人能帮助我赢得这场战斗，我会很高兴。

迈克尔

我没有

解决这个问题的方法，但我可以告诉你问题是什么。

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

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

相关文章：