@kuberspace/kuberform

Kuberform

#
#### Kuberform is a JavaScript package for creating react web forms
#

Quick start

$3

``bash
npm install kuberform --save
`

$3

`jsx
import {FormGroup,FormControl,FormArray} from '@kuberspace/kuberform';
`

$3

`ts
interface Props {
groupName: String;
}
`

$3

`ts
interface Props {
arrayName: String;
}
`




$3

`ts

interface Props {
controlName: String;
defaultValue: any | undefined;
validators:Array< (value: string, observable: Observable<{[key:String]:String} | null>) => void > | undefined;
}
`

$3

`ts

interface Props {
value: any | null;
status: String;
setValue: (value: any): void {};
invalid: Boolean;
touched: Boolean;
dirty: Boolean;
errors: {[key:String]: Boolean | any};
}
`

$3


`ts

interface Props {
value: any | null;
status: String;
invalid: Boolean;
touched: Boolean;
dirty: Boolean;
addChlid: (index: number): void {} | undefined;
removeChild: (index:number): void {} | undefined;
}
`




$3

`jsx
import React from 'react';
import {FormGroup,FormControl,FormArray} from '@kuberspace/kuberform';
import InputField from 'yourinputfield';

class myform extends React.component {

constructor(props){
super(props);
this.myform = React.createRef();
}

submit(){
console.log(this.myform.current.getValue());
}
addChild(){
this.myform.current.getControl("nestedArray").addChild();
}

render(){
return (





)
}
}
`

Making a validator

$3

`jsx
export default function required() {
return (control, obs) => {
if (control.getValue() === "bob"){
obs.next(null);
//valid
} else {
obs.next({err:true});
//invalid
}
}
}

`

$3


`jsx
componentDidMount(){
this.myform.getValue();
}
`

$3

`ts

interface Methods {
getValue: ()=> Object | null | String;
getStatus: ()=> "VALID" | "INVALID" | "PENDING";
getControl: (control:String) => React.Refrence;
setValue: (value: any) => void;
valueChanges: ()=>Observable