modulo schema angolare: aggiungi html personalizzato per compilare i campi

Question

Ho appena iniziato a esaminare il modulo dello schema angolare, quindi questo potrebbe essere qualcosa che ho perso nei documenti o nella descrizione.

Quello che sto cercando di fare è aggiungere un'icona accanto all'etichetta dei campi modulo generati e accanto al campo stesso. In questo modo:

Ma fuori dal-schema-forma angolare scatola genererà:

so di poter fare i miei tipi di campo personalizzato, ma è che il modo in cui andare? Ciò richiederebbe la ridefinizione di tutti i tipi di campo in una variante personalizzata, poiché ho bisogno di queste due icone e della loro funzionalità su tutti i campi del modulo.

Speravo che esistesse un modo più semplice per aggiungere questa funzionalità all'html generato e un modo semplice per aggiungere funzionalità (funzione ng-clic) su di esse.

Edit: Dopo aver letto la documentazione ancora una volta, ho capito che ho bisogno di definire il mio tipo di campo personalizzato (https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md)

Da quanto ho capito, ho bisogno di aggiungere il seguente al mio moduli di configurazione blocco:

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

ho anche aggiunto il contenuto di shared/templates/customInput.tpl.html a $templatesCache.

Ma quando cerco di rendere un modulo, con uno schema simile

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

vedo solo il primo campo (nome) e l'età. Il tipo personalizzato è semplicemente ignorato.

Ho provato a eseguire il debug del mio problema, ma per quanto posso vedere, il campo personalizzato viene correttamente aggiunto al decoratore. Ho provato a console.log il schemaFormDecoratorsProvider.decorator() e lì posso vedere il mio tipo di campo personalizzato.

Ho anche provato a sparare un $scope.$broadcast('schemaFormRedraw') nel mio controller, ma vedo ancora solo i tipi di campo integrati.

Come prova, ho cercato di definire il mio decoratore, sovrascrivendo il Bootstrap decoratore di default:

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}, 
}, []); 

mi sarei aspettato di vedere tutti i campi da prestare la stessa, dal momento che solo definisco un default scrivi e il mio tipo personalizzato. Ma ancora, vedo solo i tipi di render renderizzati, il mio custominput è fino a quando non viene ignorato.

Cosa mi manca?

Answer 1

Ho avuto lo stesso problema, il problema è che non si deve confondere lo schema JSON con la definizione del modulo.

Per eseguire il rendering di un componente personalizzato è necessario modificare la definizione del modulo. IO.e nel controller modulo defintion standard potrebbe essere simile:

$scope.form = [ 
    "*", 
    { 
     type: "submit", 
     title: "Save" 
    } 
    ]; 

Dovrete cambiare questo:

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