angle-schema-form：フォームフィールドにカスタムhtmlを追加する

Question

角度スキーマ形式を調べ始めましたので、これはドキュメントや説明で見逃している可能性があります。

私がしようとしているのは、生成されたフォームフィールドのラベルの横に、そしてフィールド自体の隣にアイコンを追加することです。

しかし、外箱の角スキーマ・フォームが生成されます：：そう同様

を私は私自身のカスタムフィールドの種類を作ることができます知っているが、それは方法です行く？これは、私がこれらの2つのアイコンとその機能をすべてのフォームフィールドに必要とするため、カスタムバリアントのすべてのフィールドタイプを再定義する必要があります。

私は生成されたhtmlにこの機能を追加する簡単な方法があり、それらに機能（ng-click機能）を追加する簡単な方法があると期待していました。

編集：再びドキュメントを通して読んだ後、私は私が集まるところでは私自身のカスタムフィールドタイプ（https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md）

を定義する必要があることを考え出した、私は私のモジュールの設定に以下を追加する必要がありますブロック：

schemaFormDecoratorsProvider.addMapping(
    'bootstrapDecorator', 
    'custominput', 
    'shared/templates/customInput.tpl.html', 
    sfBuilderProvider.builders.sfField 
); 

私も$templatesCacheにshared/templates/customInput.tpl.htmlの内容を追加しています。

しかし、私は

"schema": { 
    "type": "object", 
    "properties": { 
     "firstName": { 
      "title": "First name", 
      "type": "string" 
     }, 
     "lastName": { 
      "title": "Last name", 
      "type": "custominput" 
     }, 
     "age": { 
      "title": "Age", 
      "type": "number" 
     } 
    } 
} 

のようなスキーマで、フォームをレンダリングしようとすると、私は最初のフィールド（firstNameの）と年齢を参照してください。カスタムタイプは無視されます。

私は問題への道をデバッグしようとしましたが、私が見る限り、カスタムフィールドはデコレータに正しく追加されています。私はconsole.logにしようとしましたschemaFormDecoratorsProvider.decorator()と私は自分のカスタムフィールドの種類を見ることができます。

私はまたコントローラの$scope.$broadcast('schemaFormRedraw')を起動しようとしましたが、まだビルドインされているフィールドタイプしか見ることはできません。試験として

、私はデフォルトのブートストラップのデコレータを上書きし、私自身のデコレータを定義しようとしました：

schemaFormDecoratorsProvider.defineDecorator('bootstrapDecorator', {   
    'customType': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders}, 
    // The default is special, if the builder can't find a match it uses the default template. 
    'default': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders}, 
}, []); 

私は唯一のデフォルトを定義するので、私は、同じことをレンダリングするすべてのフィールドを見ることを期待しますタイプと自分のカスタムタイプ。しかし、まだ、私はレンダリングされた型のレンダリングしか見ることができません。私のカスタムインプットは無視されます。

私には何が欠けていますか？

Answer 1

私はこの同じ問題を抱えていました。問題は、JSONスキーマをフォーム定義と混同しないことです。

カスタムコンポーネントをレンダリングするには、フォーム定義を変更する必要があります。私。あなたはこの答えを見つけるか

$scope.form = [ 
    "firstName", 
    "age", 
    { 
     key:"lastName", 
     type:"customInput" 
    }, 
    { 
     type: "submit", 
     title: "Save" 
    } 
    ];