1

我正在编写一个要在表单中使用的指令。这个想法是包装错误和验证的功能。我遇到的问题是该指令正在运行，但 $invalid 表单未设置属性。

这是我的代码：

 this.fgAdmin.directive('fgTextField', [
  'uniqueNameGenerator', 'i18nService', function(uniqueNameGenerator, i18nService) {
    return {
      restrict: 'A',
      scope: {
        model: '=ngModel',
        form: '=',
        label: '@'
      },
      compile: function(element, attrs) {
        var $column, $error, $field, $label, $row, $wrapper, columns, formField, name;

        $wrapper = element;
        ------ here i create other html elements just for wrapping the element with Zurb foundation *
        name = uniqueNameGenerator();
        formField = "form['" + name + "']";
        $field = angular.element("<input type='text' id='" + name + "' name='" + name + "'/>");
        $field.attr('ng-model', 'model');
        $field.attr('ng-class', "{error: " + formField + ".$dirty && " + formField + ".$invalid}");
        if ('true' === attrs.required) {
          $field.attr('required', true);
        }
        $label = angular.element("<label>{{label}}</label>");
        $label.attr('ng-class', "{error: " + formField + ".$dirty && " + formField + ".$invalid}");
        $wrapper.append($label);
        $wrapper.append($field);
        ----
      },
      controller: [
        '$scope', function($scope) {
         ---
        }
      ]
    };
  }
]);

html

<form name="form" class="form-horizontal">
    <div fg-text-field
      ng-model="model.name"
      label="Nombre"
      form="form"
      required="true"/>
  </form>
  <button ng-disabled="form.$invalid" class="button success right" ng-click="save()">{{t.save}}</button>

因此，想法是保存按钮保持禁用状态，直到用户完成必填字段。

当我输入一些文本（输入有要求）时，即使表单模型有效，保存按钮仍然被禁用。表单 $invalid 属性设置为 false，并且在用户输入字段后应该为 true。

任何想法？

提前致谢

4

0 回答 0