@c8y/tutorial 1019.19.4 → 1019.20.7

package/cumulocity.config.ts

@@ -1,4 +1,3 @@
-import { ConfigurationOptions } from '@c8y/devkit/dist/options';
 import { DefinePlugin } from 'webpack';
 import { author, description, version } from './package.json';
 
@@ -136,6 +135,12 @@ export default {
         path: './src/dynamic-forms/custom-element-example/custom-element-example.module.ts',
         description: 'A sample for a custom element in dynamic forms.'
       },
+      {
+        name: 'Validation Example Module',
+        module: 'ValidationExampleModule',
+        path: './src/dynamic-forms/validation-example/validation-example.module.ts',
+        description: 'A sample for validation options in dynamic forms.'
+      },
       {
         name: 'Forms validation example module',
         module: 'FormsTutorialModule',
@@ -622,6 +627,7 @@ export default {
         'JsonSchemaExampleModule',
         'IntroductionExampleModule',
         'CustomElementExampleModule',
+        'ValidationExampleModule',
         'CascadingStyleSheetsExampleModule',
         'LeanerStyleSheetsExampleModule',
         'SyntacticallyAwesomeStyleSheetsExampleModule',

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1019.19.4",
+  "version": "1019.20.7",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/devkit": "1019.19.4",
-    "@c8y/style": "1019.19.4",
-    "@c8y/ngx-components": "1019.19.4",
-    "@c8y/client": "1019.19.4",
-    "@c8y/bootstrap": "1019.19.4",
+    "@c8y/devkit": "1019.20.7",
+    "@c8y/style": "1019.20.7",
+    "@c8y/ngx-components": "1019.20.7",
+    "@c8y/client": "1019.20.7",
+    "@c8y/bootstrap": "1019.20.7",
     "@angular/cdk": "^16.2.11",
     "ngx-bootstrap": "11.0.2",
     "leaflet": "1.7.1",

package/src/dynamic-forms/custom-element-example/custom-element-example.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
 import { FORMLY_CONFIG } from '@ngx-formly/core';
 import { CustomFieldCheckbox } from './types/checkbox/checkbox.type.component';
 
@@ -21,6 +21,7 @@ import { CustomFieldCheckbox } from './types/checkbox/checkbox.type.component';
         parent: 'Dynamic forms'
       })
     ),
+    /* Register your custom field as Formly input type */
     {
       provide: FORMLY_CONFIG,
       multi: true,

package/src/dynamic-forms/validation-example/validation-example.component.ts

@@ -0,0 +1,125 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { AbstractControl, FormGroup, ReactiveFormsModule, ValidationErrors } from '@angular/forms';
+import { HeaderModule } from '@c8y/ngx-components';
+import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
+import { delay, of } from 'rxjs';
+
+export function ipValidator(control: AbstractControl): ValidationErrors {
+  return !control.value || /(\d{1,3}\.){3}\d{1,3}/.test(control.value) ? null : { ip: true };
+}
+
+@Component({
+  selector: 'c8y-validation-example',
+  template: `<c8y-title>Dynamic forms: Validation</c8y-title>
+    <div class="row">
+      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+        <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
+          <div class="card-block">
+            <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+          </div>
+          <div class="card-footer">
+            <button class="btn btn-default" title="Reset" type="reset">Reset</button>
+            <button class="btn btn-primary" title="Submit" type="submit">Submit</button>
+          </div>
+        </form>
+      </div>
+      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+        <div class="card">
+          <div class="card-block">
+            <div class="legend form-block">Model</div>
+            <pre style="min-height: 98px;"><code>{{ model | json }}</code></pre>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormlyModule, HeaderModule]
+})
+export class ValidationExampleComponent {
+  form = new FormGroup({});
+  model = {};
+  fields: FormlyFieldConfig[] = [
+    {
+      key: 'built-in',
+      type: 'input',
+      props: {
+        label: 'Built-in validators',
+        placeholder: 'Between 0 and 10',
+        description: 'This field uses Formly built-in validators',
+        required: true,
+        min: 0,
+        max: 10
+      }
+    },
+    {
+      key: 'ip',
+      type: 'input',
+      props: {
+        label: 'IP address',
+        placeholder: '192.168.0.1',
+        description: 'Uses custom validator declared in NgModule'
+      },
+      validators: {
+        validation: ['ip']
+      }
+    },
+    {
+      key: 'subnet-mask',
+      type: 'input',
+      props: {
+        label: 'Subnet mask',
+        placeholder: '255.255.254.0',
+        description: 'Uses custom validation through <code>validators.expression</code> property'
+      },
+      validators: {
+        snmask: {
+          expression: (c: AbstractControl) =>
+            !c.value ||
+            /(((255\.){3}(255|254|252|248|240|224|192|128|0+))|((255\.){2}(255|254|252|248|240|224|192|128|0+)\.0)|((255\.)(255|254|252|248|240|224|192|128|0+)(\.0+){2})|((255|254|252|248|240|224|192|128|0+)(\.0+){3}))/.test(
+              c.value
+            ),
+          message: (error: object, field: FormlyFieldConfig) =>
+            `"${field.formControl.value}" is not a valid subnet mask`
+        }
+      }
+    },
+    {
+      key: 'dns',
+      type: 'input',
+      templateOptions: {
+        label: 'DNS',
+        placeholder: '1.1.1.1',
+        description: 'Uses custom validation through <code>validators.validation</code> property'
+      },
+      validators: {
+        validation: [ipValidator]
+      }
+    },
+    {
+      key: 'username',
+      type: 'input',
+      props: {
+        label: 'Username',
+        placeholder: 'Spider-Man',
+        description: 'Username is checked for uniqueness asynchronously'
+      },
+      asyncValidators: {
+        uniqueUsername: {
+          expression: (control: AbstractControl) =>
+            of(
+              ['Spider-Man', 'Wonder Woman', 'Batman', 'Iron Man'].indexOf(control.value) === -1
+            ).pipe(delay(1000)),
+          message: (error: any, field: FormlyFieldConfig) =>
+            `${field.formControl.value} is already taken.`
+        }
+      }
+    }
+  ];
+
+  onSubmit() {
+    if (this.form.valid) {
+      alert(JSON.stringify(this.model));
+    }
+  }
+}

package/src/dynamic-forms/validation-example/validation-example.module.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+import { FormlyFieldConfig, FORMLY_CONFIG } from '@ngx-formly/core';
+
+export function IpValidator(control: AbstractControl): ValidationErrors {
+  return !control.value || /(\d{1,3}\.){3}\d{1,3}/.test(control.value) ? null : { ip: true };
+}
+
+export function IpValidatorMessage(error: any, field: FormlyFieldConfig) {
+  return `"${field.formControl.value}" is not a valid IP Address`;
+}
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'dynamic-forms/validation',
+      loadComponent: () =>
+        import('./validation-example.component').then(m => m.ValidationExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/dynamic-forms/validation',
+        label: 'Formly Validation',
+        icon: 'hand-o-right',
+        priority: 60,
+        parent: 'Dynamic forms'
+      })
+    ),
+    {
+      provide: FORMLY_CONFIG,
+      multi: true,
+      useValue: {
+        validators: [{ name: 'ip', validation: IpValidator }],
+        validationMessages: [{ name: 'ip', message: IpValidatorMessage }]
+      }
+    }
+  ]
+})
+export class ValidationExampleModule {}

package/src/properties-list/properties-list-example.component.ts

@@ -53,7 +53,7 @@ export class PropertiesListExampleComponent {
 
   readonly archiveManifest: Partial<IManifest> = {
     author: 'Cumulocity IoT',
-    homepage: 'https://cumulocity.com/guides/web/overview/',
+    homepage: 'https://cumulocity.com/docs/web/introduction/',
     keywords: ['Cumulocity', 'Plugin', 'Widget'],
     license: 'Apache 2.0',
     repository: {