Creating custom forms

Introduction

This tutorial will be useful for you if you need a form where the fields should interact, the layout has special features like tabs, etc.

Before reading this guide, make sure you have read:

1. Suite 3.0 forms module.
2. Angular style guide..
3. Suite 3.0 standard form components: The ui and ux of each of the app should offer the same experience, that's why you must use the building blocks (components) that Suite 3.0 offers.

Create a new ui form component

Important

For this part we need a UI library for the "dumb" form component form.

In this part you are going to create your own component, which integrates with CVA.

• If you need to create a form with a group of fields use the following schematic: yarn nx workspace-generator form-component [form-name] --project [feature]-ui --formType group

• If you need to create a form with a list of fields use the following schematic: yarn nx workspace-generator form-component [form-name] --project [feature]-ui --formType array

• If you need to create an special input use the following schematic: yarn nx workspace-generator form-component [form-name] --project [feature]-ui --formType control

Tip

If you are adding a new form control component that could be shared to other apps contact the suite framework team, probably you are creating an standard form control.

For this tutorial we are going to create a FormGroup ui component with the user profile fields and a custom layout using gdLayout:

1. Create the component:

yarn nx workspace-generator form-component --name=profile2 \
    --formType=group \
    --project=admin-center-users-ui \
    --type=admin-center-users.profile --dry-run

1. import external modules and dependencies.

@NgModule({
    declarations: [ProfileFormGroupComponent],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        TextFormControlModule,
        GridModule
    ],
    exports: [ProfileFormGroupComponent]
})
export class ProfileFormGroupModule {
    constructor(formControlRepository: FormControlRepositoryService) {
        formControlRepository.register({
            type: PROFILE_FORM_GROUP_TYPE,
            component: ProfileFormGroupComponent
        });
    }
}

1. Update the template

<div
    [formGroup]="formGroup"
    gdAreas="loginId displayName | emailAddress emailAddress"
    gdGap="5px"
>
    <its-form-control
        text
        formControlName="loginId"
        gdArea="loginId"
        label="Login id"
    >
    </its-form-control>
    <its-form-control
        text
        gdArea="displayName"
        formControlName="displayName"
        label="Name"
    >
    </its-form-control>
    <its-form-control
        text
        gdArea="emailAddress"
        formControlName="emailAddress"
        label="Email"
    >
    </its-form-control>
</div>

Configure a field to use the custom form

Once you finished with the UI component you can include the component into your form page.

1. Import the module.

@NgModule({
    imports: [
        //..
        ProfileFormGroupModule,
        EffectsModule.forFeature([
            // ...
            UserCreationPageEffect
        ])
    ]
})
export class AdminCenterUsersModule {
    //...
}

1. configure the field.

this.customizeForm(
    (b) =>
        b
            .field('identityData', (b) =>
                b
                    .displayName('Identity')
                    .field('password', (b) => b.customType('password'))
            )
            .field('profileData', (b) =>
                b
                    .displayName('Profile')
                    .customType(PROFILE_FORM_GROUP_TYPE)
                    .field('loginId', (b) =>
                        b.setValidators([
                            Validators.required,
                            Validators.maxLength(50),
                            noWhiteSpacesValidator
                        ])
                    )
                    .field('emailAddress', (b) =>
                        b.setValidators([Validators.email])
                    )
            )
    // ...
);

Summary

1. You created a new form component using the suite 3.0 generators.
2. You used the building blocks to add all the fields that you need.
3. You added the custom component to your form page.