Question

我试图创建一个自定义指令来帮助我创建引导表单并使用angular处理表单验证。

到目前为止我已经使用以下指令：

directive('formGroup', ['$compile',function ($compile) {
  var linker = function (scope, element, attrs) {
      var fieldName = attrs.formGroup;
      var formName = attrs.form;

      if (formName === undefined || formName === null) {
          //find form name
          formName = $(element).closest('form').attr('name');

          if (formName === undefined || formName === null) {
              console.error('Could not find form name for error ' + fieldName);
          }
      }

      var showErrorOn = formName + '.' + fieldName + '.$invalid';

      $(element).addClass('form-group');
      $(element).attr('ng-class', '{ \'has-error\' : ' + showErrorOn + ' }');
      $(element).removeAttr('form-group');
      $compile(element)(scope);
  }

  return {
      restrict: 'A',
      link: linker
  }}]);

与以下HTML一起使用：

<form name="testForm" novalidate>
    <div class="row">
        <div class="col-md-6" form-group="email">
            <label>Email</label>
            <input type="email" class="form-control" name="email" ng-model="email" required  />
        </div>
    </div>    
</form>

该指令的要点有两点：

查找表单名称，以便我不必为每个字段再次键入它。
添加班级＆＃34;表格组＆＃34;。
添加课程＆＃34; has-error＆＃34;只要该字段无效。

在我输入有效的电子邮件地址并在末尾添加一个点（使输入无效）之前，所有内容似乎都能正常工作。在我这样做之后，输入会自动清除，但我无法理解原因。

这是一个小提琴：http://jsfiddle.net/kgwocdyu/2/

要重现类型：＆＃34; @ email＆＃34;然后键入＆＃34;。＆＃34;输入将变为空白。

指令和角形式验证的奇怪行为

0 个答案: