ngform-helper-eli v0.0.8

FormHelperLib

This library was generated with Angular CLI version 12.2.0. It simplifies generating FormGroup or FormArray, Validation or format is declared via annotation in the object class.

How to install

npm install ngform-helper-eli

Package dependencies

npm install class-transformer

npm install reflect-metadata

npm install uuid

How to declare the form control

Use annotation "@ADD_FORMCONTROL" over the object class file name Parameter inside the "@ADD_FORMCONTROL"

Example:

export class FormControlTest{

    @ADD_FORMCONTROL({"vFormatFns":["testformat"],"validation":{required:true,customvalidator:['testCustm']}})
    fromConString:string;

    @ADD_FORMCONTROL(() => FormControlTestChild)
    fromConCustomObjectArray:FormControlTestChild[];

    @ADD_FORMCONTROL(()=>FormcontrolTestChild2)
    fromConCustomObject:FormcontrolTestChild2;
}

Description of values/fields within @ADD_FORMCONTROL:

"vFormatFns":["testformat"] parses the field 'fromConString' thru method "testformat". Function will be registered when user create the formgroup/formarray. Multiple format methods can be used.

"validation":{required:true,customvalidator:['testCustm']}is the validatior declaration for the value below, custom validatiors can also be used as shown above "testCustm". The validators are registered when the formcontrols are generated. Multiple validators can be used as shown in the example above.

How to use in ts

• Online example how to use
• declare the service in constructor method constructor(private strutFormHelper:FormHelperLibService)

• generating the formhelper (declare one helper call 'formcontrolStrutHelp' in the class) this.formcontrolStrutHelp = this.strutFormHelper.getInstanse(this); it can be more than one helper in one class when you need more than one formgroup object

  this.formcontrolStrutHelp_1 = this.strutFormHelper.getInstanse(this);
  this.formcontrolStrutHelp_2 = this.strutFormHelper.getInstanse(this);
  this.formcontrolStrutHelp_3 = this.strutFormHelper.getInstanse(this);

  different helper will proccess different Formgroup object

• Register custom method into helper, custom validation method and format method (if you have)

  • custom validation

    let customValidatorArray:CumstMethod[]=[];
    let customValidator:CumstMethod={} as CumstMethod;
    customValidator.bindObject=this; //this is optional, if no set object, default is current class
    customValidator.fn=this.validation1;
    customValidatorArray.push(customValidator);
    
    //if got one more validation in same field, just generate one more CumstMethod, for example:
    let customValidator2:CumstMethod={} as CumstMethod;
    customValidator2.bindObject=this; //this is optional, if no set object, default is current class
    customValidator2.fn=this.validation2;
    customValidatorArray.push(customValidator2);
    
    this.formcontrolStrutHelp.setCustomFN("testCustm", customValidatorArray);
    
    //method in the class
    //note: CtrlNname include object unique key and the field name, 
    //the unique key is uuid for object, it is auto generated.
    //the params "ctrlNname" and "someparams" is optional, Not necessary 
    validation1(ctrlNname?:CtrlNname,someparams?:any): ValidationErrors | null {
    ...TODO
    
    }
    
    validation2(ctrlNname?:CtrlNname,someparams?:any): ValidationErrors | null {
    ...TODO
    
    }

    NOTE: Object unique key is uuid, it is important for every formgroup, the helper will search formgroup by this key

  • Custom format method

    let customFormatArray:CumstMethod[]=[];
    let customFormat:CumstMethod={} as CumstMethod;
    customFormat.bindObject=this; //this is optional, if no set object, default is current class
    customFormat.fn=this.customFormat;
    customFormatArray.push(customFormat);
    
    this.formcontrolStrutHelp.setCustomFN("testformat", customFormatArray);
    
    customFormat(fieldValue:any):any {
    ...TODO
    return afterFormatValue;
    }

• Init the object to formgroup or formarray

  • Init the object (Example below creates one parent "FormControlTest", 2 child class "FormControlTestChild" and "FormcontrolTestChild2")

     let con=new FormControlTest();
     con.testCon=[];
    
     let fchild1={} as  FormControlTestChild;
     fchild1.age=20;
     fchild1.name="test1";
     con.testCon.push(fchild1);        
    
     let fchild2={} as  FormControlTestChild;
     fchild2.age=22;
     fchild2.name="test2";
     con.testCon.push(fchild2);
     con.testFromCon='567';
    
     let yyy={} as FormcontrolTestChild2;
     yyy.rrr="testrrr";
     yyy.ttt=123445;
     con.testObj=yyy;
    
     let yyy2={} as  FormcontrolTestChild2;
     yyy2.rrr="test22222";
     yyy2.ttt=2222222;
    
     let yyy3={} as  FormcontrolTestChild2;
     yyy3.rrr="test333333";
     yyy3.ttt=33333;
     fchild1.testObj=yyy2;
     fchild2.testObj=yyy3;

  • Init FormGroup/FormArray

    this.formcontrolStrutHelp.initForm(con);
    // or this.formcontrolStrutHelp.initForm(con, FormControlTest);
    this.myFormGroup = this.formcontrolStrutHelp.getFormGroup();

  • Declare the formgroup in html

    <form [formGroup]="myFormGroup">

  • Usage of form control in html

    formControlName="testFromCon"...

Provider Method

initForm(object:any,classType?:any):any;

• Init the form object, object is the data object, class type is the class object (this is Optional when the data object don't have the class construtor

refreshFormcontrol(object:any,classTyppe:any);

• refresh the formcontrol when the data object change the element iteam
  • some UI let user to add the element or remove element, after the object change, just refresh, it will add or remove the formcontrol into the new object

serializationObject(object:any,parenUUid?:string):any;

• Add uuid to object, currenly no need to call this function

setCustomFN(key:string,validatorCumst:CumstMethod[]);

• Set Custom method to helper

findFormGroupByCtrlKey(ctrlKey:string):FormGroup;

• Find formgroup by unique key, the ctrlKey should get from each formgroup, name "CONTROL-KEY", it can geting from service by getControlKey() method

findAllParentByCtrlKey(ctrlKey:string):FormGroup[];

• Will looking for all the parent for ctrlKey giving by paramter, a groupform list will return, it will include all the parent and itself, the parent will sort by order inside the list
  • for example: parent1, parent2....,itself

findDuplicatedValueInFormArray(proName:string,formArray:any,notIncludeEmpty?:boolean):{key:string:FormControl};

• Find duplicate value inside the from array, proName is property name in data object class, formarray is data object formarray

findFormControlObjectsByPropertyNameAndCtrlKey(ctrlKey:string,proName:string,formControlObj:any):FormControl;

findObjectsByPropertyNameAndCtrlKey(ctrlKey:string,proName:string,formControlObj:any):Object;

getFormGroup():any;

removeObjectByControlKey(obj:any,conKey:string,removeContrlName?:string,formArray?:FormArray):void;

removeAllFormControl():void;

getControlKey();

Issues

Any issues please raise to ngform-helper-eli-issues

--- 2021-11-07 Yilei Init--- --- 2021-11-11 Jerry Tay Edit---