The main aim of meta forms is to make forms based on JSON along with validation support, dependent fields, custom theming etc.
Users can easily install the RUC (Ruxptest Library) from npm. Additionally, they can also choose to install individual components based on their requirements. Install RUC Library.
To install the entire RUC library:
npm install @uxpractice/ruc-lib
If users only need the metaform component, they can install it separately:
npm install @ruc-lib/metaform
To use the metaform component in your project, follow the integration guidelines provided in the documentation. Customize the metaform as per your requirements by adjusting the configuration options mentioned below.
If you want to use metaform from RUC library then import into app.module.ts
like -
import "@uxpractice/ruc-lib/metaform"
.
If you installed metaform as a individual component then import like -
import "@ruc-lib/metaform"
Then add RuclibMetaformModule
into import
array.
Then use the metaform selector in your HTML file.
<uxp-ruclib-metaform [rucInputData]="formData" [customTheme]="customTheme"
(rucEvent)="passEvent($event)"></uxp-ruclib-metaform>
Inputs: • rucInputData: Data to be passed to the metaform. • customTheme: Custom styling/theme for the metaform.
Outputs: • rucEvent: Event emitted from the metaform.
{
formType?: 'simple' | 'stepper' // less priority
inputType: 'text' | 'password' | 'button' | 'checkbox' | 'email' | 'color' | 'date' | 'file' | 'hidden' | 'image' | 'radio' | 'number' | 'range' | 'reset' | 'search' | 'submit' | 'time' | 'tel' | 'url' | 'week' | 'month' | 'number' | 'custom' | 'select' | 'rucMultiFileUpload' | 'rucMultiSelect',
fieldType: string,
id?: string,
errorMsg? : boolean,
name?: string,
label?: string,
value?: any,
className?: string, // to be check value?: string, //Specifies the default value for an input field src?: string,
alt?: string,
appearance?: string,
min?: string, //Specifies the minimum value for an input field
max?: string, //Specifies the maximum value for an input field
width?: string, // like for image
height?: string, // like for image
checked?: boolean, //Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled?: boolean, //Specifies that an input field should be disabled
maxlength?: string, //Specifies the maximum number of character for an input field
readonly?: boolean, //Specifies that an input field is read only (cannot be changed)
required?: boolean, //Specifies that an input field is required (must be filled out)
size?: string, //Specifies the width (in characters) of an input field
step?: string, //Specifies the legal number intervals for an input field
sameRow? : boolean,
sameRowColumnWidth? : string,
tooltip? : string,
tooltipPosition? : string, //'after', 'before', 'above', 'below', 'left', 'right'
pattern? : any, // The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
placeholder?: any,
autofocus?: any, //The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
autocomplete?: any,
customComponentName?: 'multifileupload' | 'multiselect' | 'none',
rucMultiselectInput? : {
rucInputData? : any,
dataSource? : any
}, // multiselect interface
rucMultiFileUpload? : {rucInputData? : any}
hasDependentFields?: boolean,
dependentFieldParentId?: any,
dependentFields?: MetaFormConfig[];
selectedParentId?: any;
toolTipDescription?: string,
customErrorMessage?: string,
showErrorOnPopUp?: boolean, //need to be discuss more. as a enhancement
groupOptions?: groupOptions[] = [{
id: string,
name: string,
value?: string, // compulsary if its select option part selected?: boolean
disable? : boolean
}],
stepperForm?: boolean;
stepper?: Stepper[] = [{
stepControl?: string;
stepperlabel?: string;
stepperFormData?: MetaFormConfig[];
}],
rucMultiFileUploadInput?:{
rucInputData? : any,
}
}
export interface groupOptions{
id: string,
name: string,
value?: string,
disable? : boolean
}
export interface Stepper{
stepControl?: string;
stepperlabel?: string;
stepperFormData?: MetaFormConfig[];
}
Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
Thank you for choosing the Metaform Component Library. If you have any feedback or suggestions, please let us know!