@tft/crispr-forms v17.0.0
CRISPR Forms
Build forms like DNA builds life
Description
Web development tends to involve building a lot of forms, and even though it can be repetitive it's not necessarily easy. Connecting templates to FormGroup
s takes time and there are a lot of opportunities to make mistakes along the way that can difficult to debug. Large form are difficult to keep organized, and long form templates are cumbersome to update.
Luckily, we've abstracted out the template work entirely, allowing the end developer to simply pass a config
object to the tft-crispr-forms
component and it will use these instructions to build out the form. This allows the end developer to focus on the business logic and not the template details.
We currently only support styling for Material Design, but support for other design systems is on our roadmap.
Supported Angular Material fields:
- Autocomplete
- Autocomplete Chiplist
- Checkbox
- Input
- Select
- Textarea
- Slider
- Datepicker
- Button
- Heading
- Divider
More fields coming soon!
Super sweet features:
- computed values: field values based on one or many other field values (fieldC === fieldA * fieldB)
- dynamically disabled fields: disable a field reactively based on other field(s) values
- configurations to handle all the features of each Angular Material field
Installation
CRISPR Forms has a few dependencies. First you'll need Angular Material. Usually you can just run ng add @angular/material
. Find installation docs here.
The datepicker field require date-fns
and @angular/material-date-fns-adapter
to be installed.
npm i date-fns @angular/material-date-fns-adapter
You will have also have to provide value for MAT_DATE_LOCALE
in your root module.
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { enUS } from 'date-fns/locale';
@NgModule({
...
providers: [
{
provide: MAT_DATE_LOCALE,
useValue: enUS,
},
],
});
There are default messages for all the built in Angular validators, but they can easily overwritten by setting the errorDictionary
field on the config
input. Custom messages can also be created for custom validators.
Usage
With CRISPR Forms we've abstracted out form template entirely allowing you to generate your form by simply passing a configuration object to the tft-crispr-form
component.
Interactive documentation can be found on Stackblitz here, with editable examples for most features.
In some-component.html
we pass the configuration to the component and handleSubmit
function to the submitted
event.
<crispr-form
[config]="config"
(submitted)="handleSubmit($event)">
</crispr-form>
In some-component.ts
we define the config
and handleSubmit
function.
export class DemoComponent implements OnInit {
config: FormConfig = {
fields: [
// a basic input field in the form with the following configuration
{
controlType: ControlType.INPUT,
label: 'I am a label on a text input',
controlName: 'textInput',
placeholder: 'I am a placeholder in a text input',
validators: [Validators.required, Validators.minLength(5)],
},
{
controlType: ControlType.SELECT,
label: 'I am a label on a text input',
controlName: 'textInput',
options: [
{label: 'option a', value: 'optionA'}
{label: 'option a', value: 'optionA'}
],
placeholder: 'I am a placeholder in a text input',
validators: [Validators.required, Validators.minLength(5)],
},
]
}
}
Buttons can reset form or take custom events
See example here.
Datepicker can take a callback function to pass a class to specified fields
See example here. Be sure to check out the corresponding .scss file to see how we pass styles down to the cell class.
Pass Custom Components to CRISPR
Simply create a component and pass it as an argument to the component
property.
export class CustomComponentComponent {
customComponentConfig: FormConfig<CustomInputConfig> = {
autocomplete: 'off',
fields: [
{
component: CustomInputComponent,
controlType: ControlType.CUSTOM,
controlName: 'customComponent',
},
Examples of how to extend current field behavior available here
Breaking Changest v13 => v14
Switch from MomentDateAdaptor to FnsDateAdapter
With momentjs shifting into maintenance mode, it no longer makes sense to use the MomentDateAdaptor
, so we've switched to the FnsDateAdapter
. This means that for DatepickerFieldConfig
s the datepickerFilter
, cellClassFunction
, dateClass
properties, instances of Moment
will need to be replaced with Date
.
v13
datepickerFilter?: (date: Moment) => boolean;
cellClassFunction?: MatCalendarCellClassFunction<Moment>;
dateClass?: (parentGroup: FormGroup) => Observable<MatCalendarCellClassFunction<Moment>>;
v14
datepickerFilter?: (date: Date) => boolean;
cellClassFunction?: MatCalendarCellClassFunction<Date>;
dateClass?: (parentGroup: FormGroup) => Observable<MatCalendarCellClassFunction<Date>>;
You'll also have to set up a date locale in your root module. See installation for details on how to set up the new adaptor.
Upcoming / In Progress
Creating modules for each component so that you can avoid importing unused components
Framework agnostic with Angular Elements
- More examples of how to change field layout
- The rest of the Angular Material fields:
- Radio button
- Slide toggle
- Button toggle
2 months ago
2 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago