Libreria di moduli di schema JSON angolare

Blog

Libreria di moduli di schema JSON angolare

Un componente del modulo di schema JSON angolare leggero



Caratteristiche

  • Rende forme compatte
  • Supporta l'associazione dati a 2 vie
  • Completamento automatico basato sui servizi REST (le risposte complesse possono essere elaborate tramite il puntatore JSON esteso)
  • Opzioni di layout flessibili (scheda, tabella, verticale, orizzontale)
  • Diversi widget di input (caricamento file, selezione data/colore, completamento automatico, …)
  • Leggero:<1000 lines of code

Installazione

Per utilizzare la libreria nel tuo progetto, segui questi passaggi:

npm i @angular/material npm i @angular/flex-layout npm i @angular/cdk npm i @dashjoin/json-schema-form

Nel modulo della tua app aggiungi:



import { JsonSchemaFormModule } from '@dashjoin/json-schema-form'; ... @NgModule({ ... imports: [ JsonSchemaFormModule, ... ], ... }

Un piccolo componente di esempio:

import { Component } from '@angular/core'; import { Schema } from '@dashjoin/json-schema-form/lib/schema'; @Component({ selector: 'app-root', template: `
{{print()}}
 ` }) export class AppComponent { schema: Schema = { type: 'array', items: { type: 'object', properties: { name: { type: 'string' }, bday: { type: 'string', widget: 'date' } } } }; value: any = [{ name: 'Joe', bday: '2018-09-09T22:00:00.000Z' }]; print(): string { return JSON.stringify(this.value, null, 2); } } 

Infine, aggiungi lo stile del materiale e le icone a styles.css:



@import '~@angular/material/prebuilt-themes/indigo-pink.css'; @import 'https://fonts.googleapis.com/icon?family=Material+Icons';

Estensioni dello schema JSON

Definiamo un paio di estensioni a JSON Schema per definire l'interfaccia utente e il layout del form. Si prega di vedere anche il parco giochi dimostrativo dove sono disponibili esempi di tutte le opzioni di configurazione.

Aggeggio

Questa opzione specifica un widget di input specifico da utilizzare. L'impostazione predefinita è un campo di testo semplice. Sono disponibili le seguenti opzioni:

{ 'type': 'string', 'widget': 'date' }
  • select: mostra un campo di input select con opzioni (non è possibile inserire testo libero. Le opzioni possono essere caricate tramite rest (vedi sotto))
  • upload: la proprietà JSON è impostata sui contenuti di un file caricato
  • data: utilizza il componente di selezione della data del materiale
  • area di testo: visualizza un'area di testo su più righe
  • password: l'inserimento è mostrato come *****
  • colore: mostra un widget per la selezione dei colori
  • datetime-local, email, month, tel, time, url, week: utilizza il browser nativo tipi di input

Widget personalizzati

È possibile creare widget personalizzati utilizzando i seguenti passaggi:

  • creare un componente che implementa WidgetComponent . Tutti i dati rilevanti come il sottoschema applicabile e il valore corrente vengono passati al componente. Assicurati di emettere le modifiche al valore. Un esempio può essere trovato qui
  • Nel componente padre, aggiungi questo servizio al tuo costruttore: servizio privato: JsonSchemaFormService
  • Registra il tuo widget in ngOnInit() utilizzando questo servizio: this.service.registerComponent('times2', CustomComponent);
  • Includi il widget nel tuo schema: { widget: custom, widgetType: times2 }

Scelte di completamento automatico

I seguenti campi controllano il modo in cui le opzioni di selezione e completamento automatico vengono ottenute da un backend REST:

{ 'type': 'string', 'choicesUrl': '/assets/autocomplete-simple.json', 'choicesVerb': 'GET' }
  • scelte: array di stringhe che permette di definire le scelte in modo statico
  • choiceUrl: definisce l'URL del servizio REST
  • choiceVerb: definisce il verbo HTTP da utilizzare per l'URL del servizio REST, il valore predefinito è POST
  • choiceUrlArgs: definisce il parametro del servizio REST. La convenzione è di avere un unico parametro. Più campi devono essere racchiusi in un singolo oggetto
  • jsonPointer: utilizzato per trasformare il risultato REST in un array di stringhe se non è già in quella forma. Nota che usiamo una versione leggermente estesa di Puntatore JSON che consente l'elaborazione di array di oggetti. Considera i seguenti esempi:
Risposta Puntatore JSON Risultato (stringa[])
{risultato: [A, B]} /risultato [A,B]
[{nome:A}, {nome:B}] /*/nome [A,B]

Completamento automatico e selezione dei nomi visualizzati

Se si desidera che il valore di controllo dell'opzione (ciò che viene salvato nel modulo) sia diverso dal valore di visualizzazione dell'opzione (ciò che viene visualizzato nel campo di testo), l'opzione displayWith consente di farlo. Il valore di displayWith è il nome con il quale è stata registrata la classe di implementazione per eseguire questo lavoro. La classe deve implementare il display interfaccia. Un esempio può essere trovato alla fine del componente del parco giochi . La registrazione può essere effettuata in ngOnInit() utilizzando questo servizio: this.service.registerDisplayWith('states', new MyDisplayer()); Considera il seguente esempio:

{ 'type': 'string', 'displayWith': 'localName', 'choices': [ 'https://en.wikipedia.org/wiki/Indonesia', 'https://en.wikipedia.org/wiki/Peru', 'As is - no tooltip' ] }

Il completamento automatico è configurato con localName che è un visualizzatore integrato. Tratta opzioni come URL e visualizza il nome locale che è il testo dopo l'ultimo /. Questo fa sì che il menu a discesa visualizzi il Perù con il tooltip che indica il valore reale https://en.wikipedia.org/wiki/Perù che viene scritto nel valore JSON.

Opzioni di layout

Le opzioni di layout determinano la disposizione degli elementi di input di array e oggetti. Queste opzioni possono essere applicate per ogni livello di nidificazione (ad es. se stai inserendo una serie di oggetti):

{ 'type': 'array', 'layout': 'horizontal', 'items': { 'type': 'object', 'layout': 'vertical', 'properties': { 'name': { 'type': 'string' }, 'version': { 'type': 'number' } } } }
  • orizzontale (predefinito): i controlli di input sono disposti orizzontalmente e flessibili se lo spazio è insufficiente
  • verticale: i controlli di input sono disposti verticalmente
  • tab: i controlli sono mostrati in tab (si applica solo agli array e agli oggetti con proprietà aggiuntive)
  • tabella: i controlli sono mostrati in una tabella con i nomi delle proprietà che sono i nomi delle colonne (si applica solo a un array di oggetti)
  • select: l'array viene mostrato come una selezione multipla (si applica solo agli array di stringhe)
  • Qualsiasi elemento può essere inserito in un pannello di espansione aggiungendo espanso: vero / falso. Il valore booleano indica se il pannello è espanso per impostazione predefinita o meno

I campi stile e classe consentono di passare stili e classi CSS ai campi di input. Ad esempio, potresti enfatizzare l'input con un'elevazione z maggiore e adattare valori di input più lunghi aumentando la larghezza dell'elemento di input predefinito:

{ 'type': 'string', 'class': [ 'mat-elevation-z2' ], 'style': { 'width': '400px' } }

Si prega di vedere anche la definizione di the Schema oggetto.

Struttura di questo repository

L'archivio contiene:

Scarica i dettagli:

Autore: dashjoin

Dimostrazione dal vivo: https://dashjoin.github.io/

GitHub: https://github.com/dashjoin/json-schema-form

#angular #javascript #angularjs #angular-js