It simplifies generating FormGroup or FormArray
npm install ngform-helper-eliThis 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.
###### npm install ngform-helper-eli
###### npm install class-transformer
###### npm install reflect-metadata
###### npm install uuid
Use annotation "@ADD_FORMCONTROL" over the object class file name
Parameter inside the "@ADD_FORMCONTROL"
| name | value type | desc |
|:----------:|:---------------:|:---------------------------------------------------------:|
| vFormatFns | string Array | for init value formated, some value want to do the format |
| validation | validation rule | for declare the rule for form value |
| | class strut | Decide class type for object array or custom object |
#### 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.
| validation | value type | desc |
|:---------------:|:----------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| min | number | Validator that requires the control's value to be greater than or equal to the provided number |
| max | number | Validator that requires the control's value to be less than or equal to the provided number |
| required | boolean | Validator that requires the control have a non-empty value |
| requiredtrue | boolean | Validator that requires the control's value be true. This validator is commonly used for required |
| email | boolean | Validator that requires the control's value pass an email validation test |
| minlength | boolean | Validator that requires the length of the control's value to be greater than or equal to the provided minimum length. This validator is also provided by default if you use the the HTML5 minlength attribute. Note that the minLength validator is intended to be used only for types that have a numeric length property, such as strings or arrays. The minLength validator logic is also not invoked for values when their length property is 0 (for example in case of an empty string or an empty array), to support optional controls. You can use the standard required validator if empty values should not be considered valid |
| maxlength | boolean | Validator that requires the length of the control's value to be less than or equal to the provided maximum length. This validator is also provided by default if you use the the HTML5 maxlength attribute. Note that the maxLength validator is intended to be used only for types that have a numeric length property, such as strings or arrays |
| pattern | boolean | Validator that requires the control's value to match a regex pattern. This validator is also provided by default if you use the HTML5 pattern attribute |
| nullvalidator | boolean | Validator that performs no operation |
| customvalidator | string[] | This is the custom validation method name array, there are declared and registor by user |
---
* generating the formhelper (declare one helper call 'formcontrolStrutHelp' in the class)
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