Giter VIP home page Giter VIP logo

mapurba / angular-dynamic-forms Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 1.0 131 KB

angular-dynamic-forms

Home Page: https://dynamic-components.github.io/#/dynamic-forms/all

License: MIT License

JavaScript 4.81% TypeScript 59.77% HTML 29.70% SCSS 1.91% Dockerfile 3.81%
dynamic-forms form form-validation forms json-forms validation validator angular-json-forms angular-forms ng-dynamic-forms

angular-dynamic-forms's Introduction

Dynamic Form And Validation

Validation provides a means to ensure the user is inputting usable data into a form. Form validation can be expressed to a user initially by denoting required inputs with the required symbol; or, after a user enters invalid information into the form through warnings and invalid states.

A Basic Form with Validation

#demo https://dynamic-components.github.io/#/dynamic-forms/simple

#Simple Dynamic forms.

Form json

 import { TextArea, Textbox } from 'dynamic-forms';
 
 export class FormsComponent implements OnInit {

   inputfields: any[] = [
     new Textbox({
       key: "Name",
       label: "Name",
       type: "text",
       value: '',
       required: true,
     }),
     new TextArea({
       key: "Discription",
       label: "Description",
       type: "text",
       value: '',
       required: false,
     })
   ];
   
   submit(value: string) {
     console.log(JSON.parse(value));
   }
 }

Template

<dynamic-forms [inputFields]="inputfields" (submit)="submit($event)">
  <div class=" btn-container m-t-md">
    <button type="submit" class="btn-primary btn">
      Save
    </button>
    <button type="button" class="js-details-target btn">
      Cancel
    </button>
  </div>
</dynamic-forms>

#module

import { DynamicFormModule } from 'dynamic-forms';

  imports: [
    DynamicFormModule 
  ],

A Multi Value Form with Validation

Dynamic forms with multi value input in table

A Type Ahead Form with Validation

few toxic input fields

angular-dynamic-forms's People

Contributors

mapurba avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.