0

この例を参照してください: http://jsbin.com/cenugiziju/edit?html,js,output

ディレクティブを作成しました:example-directive このディレクティブは、この html ファイル内のラベルと入力を持つ templateUrl で構成されています。このフィールドは としてマークされていrequiredますvm.formFields。

Form セクション内をのぞいてみると、必要なディレクティブが入力されていなくても、$validすでに に設定されていることがわかります。true私はこれがfalse.

Formly に、フィールドを持つカスタム ディレクティブから取り込まれたフィールドを必須にする方法はありますか?

4

1 に答える 1

2

混乱と遅延について申し訳ありません。私はあなたが探していた答えを作成しました。ディレクティブを入力しているため、実際には必要な値を含むオプションをそのディレクティブに送信する必要があります...これは実際の例です...これは、すべての検証などを自分で処理する必要があることを意味しますFormalyJS を介して要素を生成するのではなく、独自のディレクティブで生成します (他の方法がないことを確認してください...)

これは、required/ maxlength /minlength を使用して修正されたコードです。

jsbin

私が実際に行ったことは、Formly のオプションをディレクティブに渡し、それに検証を追加することでした。

   app.directive('exampleDirective', function() {
return {
  templateUrl: 'example-directive.html',
  scope:{
    options:'=options',
    ngModel:'=ngModel'
  },
  link:function(scope, element, attrs){
    scope.isRequired = scope.options.templateOptions.required;
    scope.minValue = scope.options.templateOptions.min;
    scope.maxValue = scope.options.templateOptions.max;
  }
};

});

<script type="text/ng-template" id="example-directive.html">
  <div class="form-group">
    <label for="{{::id}}">{{options.templateOptions.label}}</label>
    <input id="{{::id}}" name="{{::id}}" class="form-control" ng-model="ngModel" ng-required="isRequired" ng-minLength="{{minValue}} ng-maxLength={{maxValue}}"/>
  </div>
</script>

これは、vm.formFields テンプレートのテンプレートへの追加です: ''

したがって、フィールドを追加する場合は、データをディレクティブに渡し、ディレクティブに対応するコードを追加する必要があります...私はFormlyにあまり詳しくありませんが、これが私が提供できる解決策です

注: オプション項目をディレクティブに渡します。これは、FormalyJS がそれを構築する方法であるためです....いつでも独自のものを使用できます...しかし、formly ディレクティブの後にレンダリングされるため、より簡単になると考えました

編集

ここに更新されたJSBINがあります

ディレクティブに ngModel を追加しなければならなかったことがわかります... require でそれを実行してから使用することもできます。私はこのようにすることを好みます...しかし、ディレクティブを定義する div に渡す必要があります... 更新されたコードをチェックアウトします

于 2015-09-14T20:24:11.857 に答える