Skip to content

How to do "Create Form" Tutorial

Jump to bottom
Oleksandra Lytvynets edited this page May 21, 2022 · 12 revisions

There are two types of create forms in the Oos application:

  1. create-forms-wrappers - this type looks like wrapper that consists of several subForms. For example create-child and inside this component there are several child-forms: image
  2. full-create forms - this type consists of the form-wrapper and has one small form inside. For example user-config: image

Important points to create any create-forms in the application:

1) Styles - Import appropriate styles. For form-wrapper only create-form-wrapperstyle, for sub-form - create-form style. Sometimes for the form you need both, for the second type (full form) you ALWAYS need both - for general form view creation and for styling inputs inside;

  • @import "src/app/shared/styles/create-form-wrapper.scss";
  • @import "src/app/shared/styles/create-form.scss";

2) Abstract Create Form Component - create-form-wrapper should EXTENDS abstract create-form-component. This simple component has general important functionality and characteristics for the instance creation.

  • OnDestroy method
  • determineEditMode - is needed to identify is edit mode or create
  • setEditMode - method to apply logic for editing
  • subscribeOnDirtyForm - this is an important method to track is form dirty or not, so [CanDeactivate] guard can show a confirmation modal for leaving the page if the form is not submitted.

3) Guards - Forms should have guard [CanLoad] and [CanDeactivate]. CanLoad is needed to not let the user with the wrong role open create-form (a provider cannot create children, a parent cannot create workshops, etc). CanDeactivate tracks if the form is dirty, if yes - before leaving the page the user will be asked for action confirmation.

4) Validations - All the forms MUST have validators and validator-hint-component below the input with corresponding attributes for correct validation flow.

5) Next/Submit Buttons - Next Step/Submit button should be disabled if the Form or Array of Forms is invalid;

6) Navigation Path - To each form should be added navigation path. Mark TODO if there is none. Create-abstract-form forces you to add this method to the component.

7) Stepper - If there is a stepper, then set [linear]="!editMode" attribute to it.

8) Value triming - add appTrimValue directive to text-input and text areas, so it will remove spaces in string

Clone this wiki locally