angularjs-directive - フォームと $invalid プロパティのディレクティブ

Question

フォーム内で使用するディレクティブを作成しています。アイデアは、エラーと検証の機能をラップすることです。私が抱えている問題は、ディレクティブが機能していることですが、フォーム $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 になるはずです。

何か案が？

前もって感謝します