8

ディレクティブで作成されたフィールドでフォームを作成したいと思います。データのデータ バインディングは正しく機能しますが、検証は機能しません。

これはhtmlです：

<body ng-controller="MainCtrl">
  <h1>form</h1>
  <form name="form">
      <div ng-repeat="conf in config">
          <div field data="data" conf="conf"></div>
      </div>
  </form>
  <pre>{{data|json}}</pre>
</body>

コントローラーとフィールド ディレクティブ:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.data = {name: '', age: ''}
    $scope.config = [
        {field: 'name', required:true},
        {field: 'age'}
    ];
});

app.directive('field', function ($compile) {
    return {
        scope: {
            data: '=',
            conf: '='
        },
        link: function linkFn(scope, element, attrs) {
            // field container
            var row = angular.element('<div></div>');

            // label
            row.append(scope.conf.field + ': ');

            // field input
            var field = angular.element('<input type="text" />');
            field.attr('name', scope.conf.field);
            field.attr('ng-model', 'data.' + scope.conf.field);
            if (scope.conf.required) {
                field.attr('required', 'required');
            }
            row.append(field);

            // validation
            if (scope.conf.required) {
                var required = angular.element('<span>required</span>');
                required.attr('ng-show', 
                    'form.' + scope.conf.field + '.$error.required');
                row.append(required);
            }

            $compile(row)(scope);
            element.append(row);
        }
    }
});

問題は、フィールドの検証がname機能せず、検証テキストrequiredが表示されないことです。ディレクティブが不明であるform可能性があります。ng-showしかし、フォームをフィールド ディレクティブに渡す方法がわかりません。修正方法を教えてください。ありがとう。

ここにライブコードがあります: http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF?p=preview

4

3 に答える 3

5

トド:

前：

$compile(row)(scope);
element.append(row);

後：

element.append(row);
$compile(row)(scope);

p/s in 'planker' 施設の css を追加:

.ng-invalid {
  border: 1px solid red;
}
于 2013-12-10T12:47:22.493 に答える
2

ng-form ディレクティブを使用して、動的フィールドをフォーム オブジェクトに直接プッシュする必要があります。

このスレッドが役に立ちます: https://github.com/angular/angular.js/issues/1404

于 2013-07-23T14:12:39.167 に答える
0

問題を修正するためにあなたのものから分岐したプランカーを次に示します 。

要約すると、ng-show ディレクティブを使用する代わりに、エラー メッセージを切り替えるウォッチを追加しました。ディレクティブ リンク内にディレクティブを動的に追加しようとすると、状況が複雑になることがあります。このような単純な使用例では、独自のウォッチを追加する方が迅速です。

また、検証の多くのユースケースを処理し、カスタム検証を簡単に作成できるように事前構成されているこのディレクティブを確認することもできますhttps://github.com/nelsonomuto/angular-ui-form-validation

var toggleRequiredErrorMessage = function (invalid) {
    if(invalid === true) {
        addRequiredErrorMessage();
    } else {
        removeRequiredErrorMessage();
    }
};
scope.$watch( watchIfRequired, toggleRequiredErrorMessage );
于 2014-06-23T17:08:53.970 に答える