npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-schema-form-view

v1.0.12

Published

Using this form requires to provide an object of type `UIFormViewComponent` containing the properties:

Downloads

46

Readme

Usage

Using this form requires to provide an object of type UIFormViewComponent containing the properties:

  • schemaObject
  • formModelObject
  • modelObject
  • validatorsObject
  • actionsObject
  • bindingsObject
  • mapperObject

Explaination

  1. schemaObject

    The JSON schema describing the model for the input data.
    Must be pure json and not containing any functions.
    This may be the representation of the data how the data structure is specified by a backend.
    See https://json-schema.org/understanding-json-schema/ for more information.

  2. formModelObject

    The extension of the JSON schema that allows to design the final view of the form.
    Must be pure json and not containing any functions.
    See https://github.com/makinacorpus/ngx-schema-form for more information.

  3. modelObject

    This file will contain any default data that may be set prior prompting the user for data.
    Must be pure json and not containing any functions.
    See https://json-schema.org/understanding-json-schema/ for more information.

  4. actionsObject

    This file will contain actions that may be mapped via buttons definitions in the formModelObject.
    Must contain key and values where the key must match to a button id and
    the value must be a function that gets the corresponding formProperty as argument.
    See https://github.com/guillotinaweb/ngx-schema-form#actions-and-buttons for more information.

    There are some default submit actions to use with a form or wizard widget
    when handling the moment when the data is sent to the service. (see here)

    More then that there are also some predefined actions that may be useful. (see here)

  5. validatorsObject

    This file allows to define validation rules that overflow the abilities of JSON schema.
    Must contain key and values where the key must match to a property name from the schema and
    the value must be a function that gets the corresponding formProperty as argument.
    See https://github.com/guillotinaweb/ngx-schema-form#advanced-validation for more information.

  6. bindingsObject

    This file will contain all necessary event bindings.
    Must contain key and values where the key must match to a property path of the current model object
    and value will contain an array of event listeners.
    See https://github.com/guillotinaweb/ngx-schema-form#custom-bindings for more information.

  7. mapperObject

    This file will contain all necessary mappings to be done on the result model.
    Must contain key and values where the key must match to a property name of the current model object
    and value will contain properties matching the target model object.
    This is used to convert the model json to a structure that the backend-server will accept.
    See https://www.npmjs.com/package/object-mapper for more information.

  8. noInputMessage

    This message text will be shown instead if for any reason the form could not be generated

Head over to the ngx project git repository for more documentation

API

  • [noCard] true or false If false the css classes card card-w-title are not added to the container div
  • [uiInitialFormViewModel] The model to build up a form
  • (onLoaded) Event emitted when the initial loading has completed
  • (onModelChangeFinal) Event emitted when the model has reached is final state and the form data is complete
  • (onModelChange) Event emitted when the model changes
  • noInputMessage A message text shown if the form couldn't be build up
  • (onBeforeAction) Event emitted before an action has been processed
  • (onAfterAction) Event emitted after an action has been processed
  • noSchemaCompile true or false
    Decide whatever to compile the schema so $ref and $defs get resolved

Example usage

Import module in your app.module.ts

    import {UIFormViewModule} from 'ngx-schema-form-view'

    @NgModule({
      ...
      imports: [
        ...

        , UIFormViewModule.forRoot() // because of the shared service 'UIFormViewTemplateService'
        ...
      ]
      ...
    })
    export class AppModule {
        ...
    }

In HTML template

      <ui-form-view
        *ngIf="uiInitialFormViewModel"
        [noCard]="true"
        [uiInitialFormViewModel]="uiInitialFormViewModel"
        (onLoaded)="onFormViewLoaded($event)"
        (onModelChangeFinal)="onModelComplete($event)"
        (onModelChange)="onModelChange($event)"
        noInputMessage="Form couldn't be generated!"
        (onBeforeAction)="onBeforeAction($event)"
        (onAfterAction)="onAfterAction($event)"
        noSchemaCompile="false"
      ></ui-form-view>

In your component.ts

    import {Component} from '@angular/core'
    import {UIFormViewModel, UIFormViewHelper, UIFormViewTemplateService} from 'ngx-schema-form-view'
    import {Actions, Bindings, Mappings, Validators} from 'ngx-schema-form-view'

    @Component({
        providers: [UIFormViewTemplateService]
    })
    export class MyComponent {

        // creating all assets within this instance
        modelObject:object = {}
        schemaObject:object = {
            type:'object',
            properties: {
              search: {
                type: 'string',
                title: '',
                description: 'Search for any applications',
                minLength: 1,
                maxLength: 100
              }
            }
        }
        schemaFormObject:object = {
            widget:{
              'id':'form',
              'buttons':[
                    {
                       id:"___action___schema_form_final",
                       label:"Submit form"
                    }]
            },
           properties:{
              search:{
                 placeholder:'Find here...',
                 widget:{
                    id:'string',
                    size:35,
                    prefix:[
                       {
                          icon:'search',
                          text:''
                       }
                    ],
                    'validationMessages':{
                       'NO_SEARCH_YET':'Text search is still development in progress...'
                    }
                 },
                 buttons:[
                    {
                       id:"reset",
                       label:"Reset"
                    }
                 ]
              }
           }
        }
        validatorsObject:Validators = {
        '/search': (value, property, form_current) => {
          if (!value) {
            return null
          }
          const error = {
            code: 'NO_SEARCH_YET',
            path: `#${property._path}`,
            message: '',
            params: [value],
            severity: 'info',
            title: 'Attention:'
          }
          return error
        }
        }
        actionsObject:Actions = {
          'reset': (property) => { property.reset() }
        }
        mapperObject:Mappings = {
          'search':'request.queryString'
        },
        bindingObject:Bindings = {
          '/search':[{
            'input': (event?: any, formProperty?: FormProperty): void => {
                          console.log('input value: ',formProperty.value)
                     }
          }]
        }

        uiInitialFormViewModel: UIFormViewModel
        constructor(private templateLoaderService: UIFormViewTemplateService){

                const uiInitialFormViewModel: UIFormViewModel = {
                  schemaObject: this.schemaObject,
                  formModelObject: this.schemaFormObject,
                  modelObject: this.modelObject,
                  validatorsObject: this.validatorsObject,
                  actionsObject: this.actionsObject,
                  mapperObject: this.mapperObject,
                  bindingsObject: this.bindingsObject
                };
                this.uiInitialFormViewModel = uiInitialFormViewModel;
        }

        getModelFromViewModelAssetsObjects(){
            let finalModelObject = null
            // you can either create the final model object from service...
            finalModelObject = this.templateLoaderService.getFinalModel(this.modelObject, this.mapperObject, this.schemaObject)
            // ... or directly form helper class
            finalModelObject = new UIFormViewHelper().getFinalModel(this.modelObject, this.mapperObject, this.schemaObject)
        }

        getModelFromViewModel(){
            // you can also create the final model object from an UIFormViewModel instance
            const uiInitialFormViewModel: UIFormViewModel = {
                schemaObject: this.schemaObject,
                formModelObject: this.schemaFormObject,
                modelObject: this.modelObject,
                validatorsObject: this.validatorsObject,
                actionsObject: this.actionsObject,
                mapperObject: this.mapperObject,
                bindingsObject: this.bindingsObject
            }
            return new UIFormViewHelper().createFinalModelObject(uiInitialFormViewModel)
        }

        onBeforeAction(event: OnActionEvent) {
          console.log('  onBeforeAction(event: OnActionEvent)', event)
        }

        onAfterAction(event: OnActionEvent) {
          console.log('  onAfterAction(event: OnActionEvent)', event)
        }
    }

UIFormViewTemplateService is not yet active...

Development

To generate all *.js, *.d.ts and *.metadata.json files:

Live preview

Try it out in the demo app

$ npm start

Versions

  • 1.x Version are for Angular 9
  • 0.0.x Version are for Angular 8 and before