@bcweed/dynamic-form-lib 0.0.3 → 0.0.4

package/src/app/app.component.ts

@@ -0,0 +1,1038 @@
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { DynamicFormConfig, DynamicFormValue, DynamicFormState, DynamicFormService, DynamicFormComponent } from 'dynamic-form-lib';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  standalone: true,
+  imports: [DynamicFormComponent],
+  styleUrl: './app.component.css'
+})
+export class AppComponent implements OnInit, AfterViewInit {
+  formConfig!: DynamicFormConfig;
+  formValues: DynamicFormValue = {};
+  formState: DynamicFormState | null = null;
+  submittedData: any = null;
+  constructor(
+    private dynamicFormService: DynamicFormService,
+   
+
+  ) {
+    
+
+  }
+
+  ngOnInit() {
+    let d = new Date('2026-03-25T07:00:00');
+    debugger;
+    this.formValues = {
+      secondVesselName: new Date('2026-03-25T07:00:00'),
+      thirdVesselName: '5555555555'
+    };
+    this.formConfig = this.createAdvancedFormConfig();
+
+  }
+
+  onFormSubmit(values: DynamicFormValue): void {
+    console.log('Form submitted:', values);
+    this.submittedData = values;
+    alert('Form submitted successfully! Check console for values.');
+  } 
+
+  onFormCancel(): void {
+    console.log('Form cancelled');
+    this.submittedData = null;
+    alert('Form cancelled');
+  }
+
+  onFormStateChange(state: DynamicFormState): void {
+    this.formState = state;
+    console.log('Form state changed:', state);
+  }
+
+  ngAfterViewInit(): void {
+    
+  }
+  
+  private createAdvancedFormConfig(): DynamicFormConfig {
+    return {
+      id: 'new-vessel-registration-information-form',
+      frames: [
+        {
+          id: 'someId',
+          order: 1,
+          sections: [
+            {
+              id: 'vessel-name',
+              title: 'Vessel Name And Port of Registry',
+              description: 'I/We wish to apply for the name:',
+              fields: [
+                {
+                  id: 'firstVesselName',
+                  label: '1st Choice',
+                  type: 'radio',
+                  popInfo: `<p>A canadian registered vessel needs to have a port of registry.</p>
+                       <p>The port of registry normally appears next to the vessel name: <span>e.g. FV Windcatcher, Victoria, BC</span></p>`,
+                  placeholder: 'e.g. Sea Breeze',
+                  inputWidth: '25%',
+                  toolTip: 'Enter your 1st vessel name choice',
+                  required: true,
+                  order: 1,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: '1st Choice is required'
+                    }
+                  ],
+                  conditionalDisabled: () => { return true; }
+                },
+                {
+                  id: 'secondVesselName',
+                  label: '2nd Choice',
+                  type: 'date',
+                  inputWidth: '50%',
+                  placeholder: 'e.g. Wind Dancer',
+                  toolTip: 'Enter your 2nd vessel name choice',
+                  required: true,
+                  order: 2,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: '2nd Choice is required'
+                    }
+                  ],
+                  conditionalDisabled: () => { return false; }
+                },
+                {
+                  id: 'thirdVesselName',
+                  label: '3rd Choice',
+                  type: 'text',
+                  placeholder: 'e.g. Cleopatra III',
+                  toolTip: 'Enter your 3rd vessel name choice',
+                  required: true,
+                  order: 3,
+                  leftPreInput: 'I certify that I have',
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: '3rd Choice is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'portOfRegistry',
+                  label: 'Port of registry/intended port of registry',
+                  type: 'select',
+                  popInfo: `<p>A canadian registered vessel needs to have a port of registry.</p>
+                       <p>The port of registry normally appears next to the vessel name: <span>e.g. FV Windcatcher, Victoria, BC</span></p>`,
+                  placeholder: 'Select a Port of Registry',
+                  toolTip: 'Select your Port of Registry',
+                  required: true,
+                  order: 4,
+                  cssClass: 'field-container-1col',
+                  postInfo: 'this is post info',
+                  postWarning: 'this is a warning. Beware',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Port of registry/intended port of registry is required'
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              id: 'vessel-particulars',
+              title: 'Particulars of Vessel',
+              fields: [
+
+                {
+                  id: 'typeOfPropulsion',
+                  label: 'Type of propulsion (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate the type of propulsion of your vessel.</p>`,
+                  required: true,
+                  order: 5,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'Self-propelled', value: 1, toolTip: 'Select this option to indicate that your vessel is self propelled' },
+                    { label: 'Sail', value: 2, toolTip: 'Select this option to indicate that your vessel is propelled by sail' },
+                    { label: 'Auxiliary', value: 3, toolTip: 'Select this option to indicate that your vessel has auxiliary propulsion' },
+                    { label: 'None', value: 4, toolTip: 'Select this option to indicate that your vessel has no propulsion' }
+                  ],
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Type of propulsion is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'methodOfPropulsion',
+                  label: 'Method of propulsion (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate the method of propulsion of your vessel. Select 'other' if not in the list of options.</p>`,
+                  required: true,
+                  order: 6,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'Single screw', value: 1, toolTip: 'Select this option to indicate that your vessel has only one (1) propeller' },
+                    { label: 'Twin screw', value: 2, toolTip: 'Select this option to indicate that your vessel has two (2) propellers' },
+                    { label: 'Triple screw', value: 3, toolTip: 'Select this option to indicate that your vessel has three (3) propellers' },
+                    { label: 'Jet', value: 4, toolTip: 'Select this option to indicate that your vessel is propelled by Jets instead of propellers' },
+                    { label: 'Other', value: 5, toolTip: 'Select this option to indicate that your vessel is propelled by another mean of propulsion not available in the list' }
+                  ],
+                  onClick: (value: any, form: FormGroup) => {
+                    if (value && value == 5) {
+                      form.controls["methodOfPropulsionOther"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Method of propulsion (Other) is required'
+                        }
+                      ]));
+
+                    }
+                    else {
+                      form.controls["methodOfPropulsionOther"].clearValidators();
+                      form.controls["methodOfPropulsionOther"].setValue(null);
+                    }
+                    form.controls["methodOfPropulsionOther"].updateValueAndValidity();
+
+                  },
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Method of propulsion is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'methodOfPropulsionOther',
+                  label: 'Method of propulsion (Other)',
+                  type: 'text',
+                  popInfo: `<p>Enter the method of propulsion of your vessel if it is not in the above list.</p>`,
+                  placeholder: 'e.g. Paddlewheel',
+                  toolTip: 'Enter the method of propulsion of your vessel if it is not found in the above list',
+                  required: true,
+                  order: 7,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Method of propulsion (Other) is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.methodOfPropulsion === 5;
+                  }
+                },
+                {
+                  id: 'numberOfEngines',
+                  label: 'Number of engines',
+                  type: 'number',
+                  popInfo: `<p>Enter the number of engines your vessel has and 0 for none.</p>`,
+                  placeholder: 'e.g. 2',
+                  toolTip: 'Enter the number of engines your vessel has and 0 for none',
+                  required: true,
+                  order: 8,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Number of engines is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'engineDescription',
+                  label: 'Engine description (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate the engine description of your vessel. Select 'other' if not in the list of options.</p>`,
+                  required: true,
+                  order: 9,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'Gas', value: 1, toolTip: 'Select this option to indicate that your engine is a Gas engine and runs mainly on Gasoline' },
+                    { label: 'Diesel', value: 2, toolTip: 'Select this option to indicate that your engine is a Diesel engine and runs mainly on some form of Diesel' },
+                    { label: 'Other', value: 3, toolTip: 'Select this option to indicate that your engine is powered by another energy source not available in the list... Such as Electric..' },
+                  ],
+                  onClick: (value: any, form: FormGroup) => {
+                    if (value && value == 3) {
+                      form.controls["engineDescriptionOther"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Engine description (Other) is required'
+                        }
+                      ]));
+
+                    }
+                    else {
+                      form.controls["engineDescriptionOther"].clearValidators();
+                      form.controls["engineDescriptionOther"].setValue(null);
+                    }
+                    form.controls["engineDescriptionOther"].updateValueAndValidity();
+
+                  },
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Engine description is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'engineDescriptionOther',
+                  label: 'Engine description (Other)',
+                  type: 'text',
+                  popInfo: `<p>Indicate the engine description of your vessel. Select 'other' if not in the list of options.</p>`,
+                  placeholder: 'e.g. Electric',
+                  toolTip: 'Enter the engine description of your vessel if it is not in the above list',
+                  required: true,
+                  order: 10,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Engine description (Other) is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.engineDescription === 3;
+                  }
+                },
+                {
+                  id: 'propulsionPower',
+                  label: 'Propulsion power (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate the propulsion power unit of your vessel.</p>`,
+                  required: true,
+                  order: 11,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'BHP', value: 1, toolTip: 'Select this option to indicate that the power of your engine is rated in Breaking Horse Power (BHP)' },
+                    { label: 'kW', value: 2, toolTip: 'Select this option to indicate that the power of your engine is rated in KiloWatts (kW)' },
+                  ],
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Propulsion power is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'enginePower',
+                  label: 'Engine power',
+                  type: 'number',
+                  popInfo: `<p>Enter the engine power of your vessel in the unit selected above (BHP or kW) and 0 for none.</p>`,
+                  placeholder: 'e.g. 150',
+                  toolTip: 'Enter the engine power of your vessel in the unit selected above (BHP or kW) and 0 for none',
+                  required: true,
+                  order: 12,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Engine power is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'speedInKnots',
+                  label: 'Speed in knots',
+                  type: 'number',
+                  popInfo: `<p>Enter the speed of your vessel in knots and 0 for none.</p>`,
+                  placeholder: 'e.g. 12',
+                  toolTip: 'Enter the speed of your vessel in knots and 0 for none',
+                  required: true,
+                  order: 13,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Speed in knots is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'length',
+                  label: 'Length (m.cm)',
+                  type: 'number',
+                  helperInfo: 'The field Length (m.cm) must be a numeric measurement in meters and centimeter.',
+                  popInfo: `<p>Enter the length of your vessel in meters and centimeters. Ex: 8.2</p>`,
+                  placeholder: 'e.g. 8.25',
+                  toolTip: 'Enter the length of your vessel in meters and centimeters. Ex: 8.2',
+                  required: true,
+                  order: 14,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Length is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'breadth',
+                  label: 'Breadth (m.cm)',
+                  type: 'number',
+                  helperInfo: 'The field Breadth (m.cm) must be a numeric measurement in meters and centimeter.',
+                  popInfo: `<p>Enter the breadth (how wide) of your vessel in meters and centimeters. Ex: 8.2</p>`,
+                  placeholder: 'e.g. 8.25',
+                  toolTip: 'Enter the breadth (how wide) of your vessel in meters and centimeters. Ex: 8.2',
+                  required: true,
+                  order: 15,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Breadth is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'depth',
+                  label: 'Depth (m.cm)',
+                  type: 'number',
+                  helperInfo: 'The field Depth (m.cm) must be a numeric measurement in meters and centimeter.',
+                  popInfo: `<p>Enter the depth (how deep) of your vessel in meters and centimeters. Ex: 8.2</p>`,
+                  placeholder: 'e.g. 8.25',
+                  toolTip: 'Enter the depth (how deep) of your vessel in meters and centimeters. Ex: 8.2',
+                  required: true,
+                  order: 16,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Depth is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'grossTonnage',
+                  label: 'Gross tonnage',
+                  type: 'number',
+                  popInfo: `<p>Enter the gross tonnage of your vessel.</p>`,
+                  placeholder: 'e.g. 16000',
+                  toolTip: 'Enter the gross tonnage of your vessel',
+                  required: true,
+                  order: 17,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Gross tonnage is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'netTonnage',
+                  label: 'Net tonnage',
+                  type: 'number',
+                  popInfo: `<p>Enter the net tonnage of your vessel.</p>`,
+                  placeholder: 'e.g. 16000',
+                  toolTip: 'Enter the net tonnage of your vessel',
+                  required: true,
+                  order: 18,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Net tonnage is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'typeOfTonnage',
+                  label: 'Type of tonnage (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate the type of tonnage entered above.</p>`,
+                  required: true,
+                  order: 19,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'Assigned formal tonnage (non-calculated tonnage)', value: 1, toolTip: 'Select this option to indicate that the tonnage of your vessel was an Assigned Formal Tonnage' },
+                    { label: 'Calculated tonnage (if calculated, specify below)', value: 2, toolTip: 'Select this option to indicate that the tonnage of your vessel was Calculated using an approved method below' },
+                  ],
+                  onClick: (value: any, form: FormGroup) => {
+                    if (value && value == 2) {
+                      form.controls["measurementSource"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Measurement source is required'
+                        }
+                      ]));
+
+                    }
+                    else {
+                      form.controls["measurementSource"].clearValidators();
+                      form.controls["measurementSource"].setValue(null);
+                    }
+                    form.controls["measurementSource"].updateValueAndValidity();
+
+                  },
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Engine description is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'measurementSource',
+                  label: 'Tonnage measurement and calculations carried out by (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate measurement source of the tonnage entered above.</p>`,
+                  required: true,
+                  order: 20,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'Vessel owner (Simplified)', value: 1, toolTip: 'Select this option to indicate that the tonnage calculation was done by the owner using the simplified method' },
+                    { label: 'Appointed tonnage measurer (Certificate of Survey)', value: 2, toolTip: 'Select this option to indicate that the tonnage calculation was done by an Appointed Tonnage Measurer' },
+                  ],
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Measurement source is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.typeOfTonnage === 2;
+                  }
+                },
+                {
+                  id: 'contructionType',
+                  label: 'Type of construction',
+                  type: 'select',
+                  popInfo: `<p>Select a Construction Type.</p>`,
+                  placeholder: 'Select a Construction Type',
+                  toolTip: 'Select from the list the type of construction of your vessel',
+                  required: true,
+                  order: 21,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Type of construction is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'hullConstructionMaterial',
+                  label: 'Hull construction materials',
+                  type: 'select',
+                  popInfo: `<p>Select a Hull Construction Material.</p>`,
+                  placeholder: 'Select a Hull Construction Material',
+                  toolTip: 'Select from the list the hull construction materials used in the construction of your vessel',
+                  required: true,
+                  order: 22,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Hull construction materials is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'hullSerialNumber',
+                  label: 'Hull serial number',
+                  type: 'text',
+                  popInfo: `<p>Enter the hull serial number of your vessel. This should be stamped on the inside of your hull.</p>`,
+                  placeholder: 'e.g. 32045006',
+                  toolTip: 'Enter the hull serial number of your vessel. This should be stamped on the inside of your hull',
+                  required: true,
+                  order: 23,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Hull serial number is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'builderName',
+                  label: 'Name of builder',
+                  type: 'text',
+                  popInfo: `<p>Enter the name of builder of your vessel. (The company or person which built your vessel).</p>`,
+                  placeholder: 'e.g. Boat Builders United or Bayliner',
+                  toolTip: 'Enter the name of builder of your vessel. (The company or person which built your vessel)',
+                  required: true,
+                  order: 24,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Name of builder is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'cityBuilt',
+                  label: 'Place (City) and year of build',
+                  type: 'text',
+                  popInfo: `<p>Enter the location (City) where your vessel was built and the year it was built.</p>`,
+                  placeholder: 'e.g. Long Beach 2018',
+                  toolTip: 'Enter the location (City) where your vessel was built and the year it was built',
+                  required: true,
+                  order: 25,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Place (City) and year of build is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'regionBuilt',
+                  label: 'Province/State',
+                  type: 'text',
+                  popInfo: `<p>Enter the province/state where your vessel was built.</p>`,
+                  placeholder: 'e.g. British Columbia',
+                  toolTip: 'Enter the province/state where your vessel was built',
+                  required: true,
+                  order: 26,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Province/State is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'countryBuilt',
+                  label: 'Country',
+                  type: 'text',
+                  popInfo: `<p>Enter the country where your vessel was built.</p>`,
+                  placeholder: 'e.g. Canada',
+                  toolTip: 'Enter the country where your vessel was built',
+                  required: true,
+                  order: 27,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Country is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'intendedVesselUse',
+                  label: 'Intended use of vessel (if non-pleasure, the Descriptor of Vessel must be completed). (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate the intended use of your vessel whether it will be for pleasure use or commercial use.</p>`,
+                  required: true,
+                  order: 28,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'Pleasure', value: 1, toolTip: 'Select this option to indicate that your vessel will mainly be used for Pleasure purposes' },
+                    { label: 'Non-Pleasure', value: 2, toolTip: 'Select this option to indicate that your vessel will mainly be used for Commercial purposes' },
+                  ],
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Intended use of vessel is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'vesselDescriptorEnum',
+                  label: 'Descriptor of vessel (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate the descriptor of your vessel. Select 'other' if not in the list of options.</p>`,
+                  required: true,
+                  order: 29,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'Fishing (excludes sport fishing)', value: 1, toolTip: 'Select this option to indicate that the vessel is a Commercial Fishing Vessel' },
+                    { label: 'Passenger', value: 2, toolTip: 'Select this option to indicate that the vessel is a Commercial Passenger Vessel' },
+                    { label: 'Tug', value: 3, toolTip: 'Select this option to indicate that the vessel is a Tug Boat' },
+                    { label: 'Cargo', value: 4, toolTip: 'Select this option to indicate that the vessel is a Commercial Cargo Vessel' },
+                    { label: 'Yacht (pleasure craft)', value: 5, toolTip: 'Select this option to indicate that the vessel is a Yacht' },
+                    { label: 'Other', value: 6, toolTip: 'Select this option to indicate that the vessel is a another type of vessel not available in the list' },
+                  ],
+                  onClick: (value: any, form: FormGroup) => {
+                    if (value && value == 6) {
+                      form.controls["vesselDescriptor"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Descriptor of vessel specification is required'
+                        }
+                      ]));
+
+                    }
+                    else {
+                      form.controls["vesselDescriptor"].clearValidators();
+                      form.controls["vesselDescriptor"].setValue(null);
+                    }
+                    form.controls["vesselDescriptor"].updateValueAndValidity();
+
+                  },
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Descriptor of vessel is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'vesselDescriptor',
+                  label: '(Specify)',
+                  type: 'select',
+                  popInfo: `<p>Select a Vessel Descriptor from the list.</p>`,
+                  placeholder: 'Select a Vessel Descriptor',
+                  toolTip: 'Select from the list the descriptor specification of your vessel if not found in the options above',
+                  required: true,
+                  order: 30,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Descriptor of vessel specification is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselDescriptorEnum === 6;
+                  }
+                },
+                {
+                  id: 'vesselIsAirCushion',
+                  label: 'If your vessel is an air cushion vehicle (ACV), give details',
+                  type: 'radio',
+                  popInfo: `<p>Indicate wheter your vessel is an air cushion vehicle (ACV) or not.</p>`,
+                  required: true,
+                  order: 31,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'No', value: false, toolTip: 'Select this option to indicate that the vessel is NOT an Air Cusshion Vehicle' },
+                    { label: 'Yes', value: true, toolTip: 'Select this option to indicate that the vessel is an Air Cusshion Vehicle' },
+                  ],
+                  onClick: (value: any, form: FormGroup) => {
+                    if (value && Boolean(value) == true) {
+                      form.controls["allUpWeight"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'All up weight is required'
+                        }
+                      ]));
+                      form.controls["modelDesignation"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Model designation is required'
+                        }
+                      ]));
+
+                    }
+                    else {
+                      form.controls["allUpWeight"].clearValidators();
+                      form.controls["allUpWeight"].setValue(null);
+                      form.controls["modelDesignation"].clearValidators();
+                      form.controls["modelDesignation"].setValue(null);
+                    }
+                    form.controls["allUpWeight"].updateValueAndValidity();
+                    form.controls["modelDesignation"].updateValueAndValidity();
+
+                  },
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Vessel is an air cushion vehicle (ACV) is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'allUpWeight',
+                  label: 'All up weight (KG)',
+                  type: 'number',
+                  popInfo: `<p>Enter the maximum weight of your vessel in kilograms.</p>`,
+                  placeholder: 'e.g. 3000',
+                  toolTip: 'Enter the maximum weight of your vessel in kilograms',
+                  required: true,
+                  order: 32,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'All up weight is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselIsAirCushion === true;
+                  }
+                },
+                {
+                  id: 'modelDesignation',
+                  label: 'Model designation',
+                  type: 'text',
+                  popInfo: `<p>Enter the model designation.</p>`,
+                  placeholder: 'e.g. PACV',
+                  toolTip: 'Enter the model designation',
+                  required: true,
+                  order: 33,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Model designation is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselIsAirCushion === true;
+                  }
+                },
+                {
+                  id: 'vesselPrviouslyRegisteredInCanada',
+                  label: 'The vessel is, or has previously been registered in Canada or a foreign country (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate wheter your vessel is, or has previously been registered in Canada or a foreign country or not at all.</p>`,
+                  required: true,
+                  order: 34,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'No', value: false, toolTip: 'Select this option to indicate that the vessel is NOT currently registered or was NOT registered in the past here in Canada or in a foreign country' },
+                    { label: 'Yes', value: true, toolTip: 'Select this option to indicate that the vessel is currently registered or was registered in the past here in Canada or in a foreign country' },
+                  ],
+                  onClick: (value: any, form: FormGroup) => {
+                    if (value && Boolean(value) == true) {
+                      form.controls["officialRegistrationNumber"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Official number is required'
+                        }
+                      ]));
+                      form.controls["registeredName"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Registered name is required'
+                        }
+                      ]));
+                      form.controls["previousPortOfRegistry"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Port of registry is required'
+                        }
+                      ]));
+                    }
+                    else {
+                      form.controls["officialRegistrationNumber"].clearValidators();
+                      form.controls["officialRegistrationNumber"].setValue(null);
+                      form.controls["registeredName"].clearValidators();
+                      form.controls["registeredName"].setValue(null);
+                      form.controls["previousPortOfRegistry"].clearValidators();
+                      form.controls["previousPortOfRegistry"].setValue(null);
+                    }
+                    form.controls["officialRegistrationNumber"].updateValueAndValidity();
+                    form.controls["registeredName"].updateValueAndValidity();
+                    form.controls["previousPortOfRegistry"].updateValueAndValidity();
+
+                  },
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'The vessel is, or has previously been registered in Canada or a foreign country is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'officialRegistrationNumber',
+                  label: 'Official number',
+                  type: 'text',
+                  popInfo: `<p>Enter the official number previously assigned to your vessel.</p>`,
+                  placeholder: 'e.g. 32056009',
+                  toolTip: 'Enter the official number previously assigned to your vessel',
+                  required: true,
+                  order: 35,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Official number is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselPrviouslyRegisteredInCanada === true;
+                  }
+                },
+                {
+                  id: 'registeredName',
+                  label: 'Registered name',
+                  type: 'text',
+                  popInfo: `<p>Enter the registered name of your vessel.</p>`,
+                  placeholder: 'e.g. Sea Angel II',
+                  toolTip: 'Enter the registered name of your vessel',
+                  required: true,
+                  order: 36,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Registered name is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselPrviouslyRegisteredInCanada === true;
+                  }
+                },
+                {
+                  id: 'previousPortOfRegistry',
+                  label: 'Port of registry',
+                  type: 'select',
+                  popInfo: `<p>Select a Port of Registry.</p>`,
+                  placeholder: 'Select a Port of Registry',
+                  toolTip: 'Select from the list the port of registry of your vessel',
+                  required: true,
+                  order: 37,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Port of registry is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselPrviouslyRegisteredInCanada === true;
+                  }
+                },
+                {
+                  id: 'vesselIsAsUnderConstruction',
+                  label: 'The vessel is recorded as a vessel under construction (select one)',
+                  type: 'radio',
+                  popInfo: `<p>Indicate wheter your vessel is recorded as a vessel under construction or not.</p>`,
+                  required: true,
+                  order: 38,
+                  cssClass: 'field-container-1col',
+                  options: [
+                    { label: 'No', value: false, toolTip: 'Select this option to indicate that the vessel is NOT currently listed as being in construction' },
+                    { label: 'Yes', value: true, toolTip: 'Select this option to indicate that the vessel is currently listed as being in construction' },
+                  ],
+                  onClick: (value: any, form: FormGroup) => {
+                    if (value && Boolean(value) == true) {
+                      form.controls["constructionRecordNumber"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Record Number is required'
+                        }
+                      ]));
+                      form.controls["temporaryName"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Temporary name is required'
+                        }
+                      ]));
+                      form.controls["constructionPortOfRegistry"].setValidators(this.dynamicFormService.getValidators([
+                        {
+                          type: 'required',
+                          message: 'Port of registry is required'
+                        }
+                      ]));
+                    }
+                    else {
+                      form.controls["constructionRecordNumber"].clearValidators();
+                      form.controls["constructionRecordNumber"].setValue(null);
+                      form.controls["temporaryName"].clearValidators();
+                      form.controls["temporaryName"].setValue(null);
+                      form.controls["constructionPortOfRegistry"].clearValidators();
+                      form.controls["constructionPortOfRegistry"].setValue(null);
+                    }
+                    form.controls["constructionRecordNumber"].updateValueAndValidity();
+                    form.controls["temporaryName"].updateValueAndValidity();
+                    form.controls["constructionPortOfRegistry"].updateValueAndValidity();
+
+                  },
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Vessel is recorded as a vessel under construction is required'
+                    }
+                  ]
+                },
+                {
+                  id: 'constructionRecordNumber',
+                  label: 'Record Number',
+                  type: 'text',
+                  placeholder: 'e.g. 550045',
+                  toolTip: 'Enter the record number of your vessel',
+                  popInfo: `<p>Enter the record number of your vessel.</p>`,
+                  required: true,
+                  order: 39,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Record Number is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselIsAsUnderConstruction === true;
+                  }
+                },
+                {
+                  id: 'temporaryName',
+                  label: 'Temporary name',
+                  type: 'text',
+                  placeholder: 'e.g. Sea Lady',
+                  toolTip: 'Enter the temporary name of your vessel',
+                  popInfo: `<p>Enter the temporary name of your vessel.</p>`,
+                  required: true,
+                  order: 40,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Temporary name is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselIsAsUnderConstruction === true;
+                  }
+                },
+                {
+                  id: 'constructionPortOfRegistry',
+                  label: 'Port of registry',
+                  type: 'select',
+                  placeholder: 'Select a Port of Registry',
+                  toolTip: 'Select from the list the port of registry of your vessel',
+                  popInfo: `<p>Select a Port of Registry.</p>`,
+                  required: true,
+                  order: 41,
+                  cssClass: 'field-container-1col',
+                  validations: [
+                    {
+                      type: 'required',
+                      message: 'Port of registry is required'
+                    }
+                  ],
+                  conditionalDisplay: (formValues: any) => {
+                    return formValues.vesselIsAsUnderConstruction === true;
+                  }
+                }
+              ]
+            }
+            ]
+
+        }],
+      submitLabel: 'Submit',
+      cancelLabel: 'Cancel'
+    };
+  }
+
+  get formIsValid(): boolean {
+    return this.formState?.isValid ?? false;
+  }
+
+  get formErrorCount(): number {
+    return this.formState?.errors.length ?? 0;
+  }
+
+
+  public backClick() {
+   
+  }
+
+}