In this project there are 2 custom form controls created as components, and therefore can be reused quite easily. Every interaction with a control is followed by a visual animation. Available controls for now:
A label which is located above a checkbox can be customized. Specify it by setting labelText attribute in the parent html. Example of html:
<app-customcheckbox [labelText]="'Custom checkbox'" formControlName="checkboxCustom"></app-customcheckbox>
You can set the inital value for the checkbox regular way by using reactive or template-driven forms.
this.mainForm = this.fb.group({
textualField : '',
checkboxCustom : false,
dropdownListCustom : null
});
To specify the items of a dropdown list set items property in the parent component. Use DropdownListItem as a template for dropdown list items. Set required attribute to true or false in html of the parent component or use reactive or template-driven form way to apply basic requirement validation. To customize the label of the dropdown list, set attribute dropdownListLabel to any string value. Example of html:
<app-customdropdownlist [required]="false" [dropdownListLabel]="'Dropdown list'" [items]="items" formControlName="dropdownListCustom"></app-customdropdownlist>