true: display year navigator, false: undisplay year navigator
false
yearRange
String
example: '1995:2050'
'1995:2050'
showTime
Boolean
true: display time, false: undisplay time
false
timeOnly
Boolean
true: display only time, false: undisplay time
false
dateFormat
String
example" 'dd/mm/yy'
'dd/mm/yy'
disabled
boolean
false
minDate
Date
new Date('month/date/year') // 11/05/2018
null
maxDate
Date
new Date('month/date/year') // 11/10/2018
null
Result data Type: Date
Dropzone
Option
Type
Desciption
Defalut Value
message
String
Description of selector
' '
upload_path
String
Name of folder save your file
'folder'
acceptedFiles
String
type of files accept upload ('image/*')
*
maxFilesize
number
Maximum size file upload
50
maxFiles
number
Maximun number of file upload
0
showPreview
Boolean
Display preview content of upload
false
url
String
Url upload file, example: /api/v1/upload
' '
| paramName | String | Name of param upload file | 'file' |
| resultTransformer | Function | Each Api upload will have a different result structure so you must customize it to push on dropzone, (example: resultTransformer: result => result.data[0].full_path - data: result of api upload))) |
ListCheckBox
Option
Type
Desciption
Defalut Value
options
object
example: [{ value: 1, label: 'label' }]
[ ]
disable
boolean
false
Result data Type: Array value of options (example: ['1', '2'])
PhoneCode
Result data Type: Object of phone code & phone number
Result data Type: Array value of options was selected
Example:
['1', '2']
Set default value: Each option want set default, need add selected: true for this.
{
value: 1,
label: 'label'
selected: true
}
TexBoxMask
Option
Type
Desciption
Defalut Value
mask
Array
Array of Regex. (example: Mask Date [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/])
[ ]
valueWithCharacter
Boolean
Get value with Character or none
false
placeholder
String
Placeholder
' '
guide
Boolean
Show mask when enter Charactor or none
false
Result data Type: String with mask or none
Example:
"07/10/1995"
"07101995"
TinyMce
Option
Type
Desciption
Defalut Value
height
String
Height of selector
'300'
plugins
String
Name of plugins you want add to selector. (example: 'print,bold,thin...')
' '
UploadFile
Option
Type
Desciption
Defalut Value
id
number
Id of input control UploadFile
1
uploadPath
String
Name of folder save your file
' '
accept
String
type of files accept upload (`'png
jpg
allowMaxSize
number
Maximum size file upload
2
multiple
boolean
true or false
false
apiUpload
String
Url upload file, example: /api/v1/upload
' '
paramName
String
Name of param upload file
'files'
resultTransformer
Function
Each Api upload will have a different result structure so you must customize it to push on dropzone, (example: resultTransformer: result => result.data[0].full_path - data: result of api upload)))
title
Html
Upload
TextArea
Option
Type
Desciption
Defalut Value
rows
Number
Number lines of textarea
10
Province
63 provinces & cities of Vietnam
Result data Type: String (example: 'Thành phố Hà Nội')
SelectionByApi
Option
Type
Desciption
Defalut Value
apiUpload
String
Api used to search or filter 'api/v1/admin/users?search='
null
resultTransformer
Function
Each Api upload will have a different result structure so you must customize it to push on SelectionByApi, (example: resultTransformer: result => result.data - data: result of api upload)))
fieldName
Function
return label by data object
""
multiple
boolean
true or false
false
lengthToSearch
Number
lenght of character start to filter
3
Block
Print [HTML] in Form
Option
Type
Desciption
Defalut Value
classes
array
A array of strings, use to add class for selector (classes: ['col-6'])
[ ]
group
integer
Any selectors that have the same group will be in the same group
Api used to search or filter 'api/v1/admin/users?search='
null
resultTransformer
Function
Each Api upload will have a different result structure so you must customize it to push on SelectionByApi, (example: resultTransformer: result => result.data - data: result of api upload)))
...
...
newTextBox({
...
validators: [{validator: Validators.required,message: 'This field is required'},{validator: Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}'),message: 'This field must be a email address'},{validator: Validators.minLength(6),message: 'Minimmum alowed charactes are 6'},{validator: Validators.maxLength(20),message: 'Maximmum alowed charactes are 20'}],
...
}),
...
isExistValidator('apiUrl', 'your-message') - 'apiUrl' must return { exist: true } if item exist
...
import{DefaultValidators}from'angular-reactive-form';
...
newTextBox({
...
validators: [{validator: DefaultValidators.isEqualValidator('input-key'),message: 'This field not match with input-key '},{validator: DefaultValidators.isDifferentValidator('input-key'),message: 'This field must diffrent with input-key'}],asyncValidators: [DefaultValidators.isExistValidator(apiUrl,yourMessage)]...}),
...
If you want create a custom validator:
Step 1: Create new file (example.validators.ts)
...
import{AbstractControl,ValidationErrors,AsyncValidatorFn}from'@angular/forms';exportfunctionisEqualValidator(matchValue: any){return(control: AbstractControl): ValidationErrors|null=>{constvalue=control.value;if(value){constcompareValue=control.root.get(matchValue).value;if(value!==compareValue){return{notEqual: {valid: false,value: control.value}};}}returnnull;};}exportfunctionisExistValidator(url,message): AsyncValidatorFn{return(control: AbstractControl): Promise<ValidationErrors|null>|Observable<ValidationErrors|null>=>{/* Your code */returnnewPromise(async(resolve,reject)=>{if(value){/* Your code => result */if(result.exist===true){resolve({isExist: {valid: false,value: control.value,message: message}});}resolve(null);}resolve(null);});};}
...
Step 2: Use (app.component.ts)
...
import{isEqualValidator,isExistValidator}from'./validators/example';
...
newTextBox({
...
validators: [{validator: isEqualValidator('input-key'),message: 'This field not match with input-key '}],asyncValidators: [isExistValidator('/api/v1/test/check/','Email is Exits')]...}),
...
