@pega/dx-component-builder-sdk 24.2.10 → 24.2.12

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/demo.stories.tsx.mustache

@@ -8,48 +8,49 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getContextName: () => {
-        return 'app/primary_1/workarea_3';
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getDataObject: () => {
-        return;
-      },
-      getActionsApi: () => {
-        return {
-          updateFieldValue: () => {
-            /* nothing */
-          },
-          triggerFieldChange: () => {
-            /* nothing */
-          }
-        };
-      },
-      getCaseInfo: () => {
-        return {
-          getClassName: () => {
-            return 'DIXL-MediaCo-Work-NewService';
-          }
-        };
-      },
-      getLocalizedValue: val => {
-        return val;
-      },
-      getLocaleRuleNameFromKeys: () => {
-        return undefined;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getContextName: () => {
+          return 'app/primary_1/workarea_3';
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getDataObject: () => {
+          return;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        getCaseInfo: () => {
+          return {
+            getClassName: () => {
+              return 'DIXL-MediaCo-Work-NewService';
+            }
+          };
+        },
+        getLocalizedValue: val => {
+          return val;
+        },
+        getLocaleRuleNameFromKeys: () => {
+          return undefined;
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.ts.mustache

@@ -9,6 +9,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface IOption {
   key: string;
@@ -60,6 +61,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -164,13 +167,15 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
 
-    const propName = (this.pConn$.getStateProps() as any).value;
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     const className = this.pConn$.getCaseInfo().getClassName();
-    const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+    const refName = this.propName?.slice(this.propName.lastIndexOf('.') + 1);
 
     this.fieldMetadata = this.configProps$.fieldMetadata;
     const metaData = Array.isArray(this.fieldMetadata) ? this.fieldMetadata.filter(field => field?.classID === className)[0] : this.fieldMetadata;
@@ -203,12 +208,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
 
   getLocalizedOptionValue(opt: IOption) {

package/src/tasks/create/templates/SDK-Angular/field/Text/demo.stories.tsx.mustache

@@ -9,19 +9,30 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };
@@ -38,6 +49,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     bReadonly$: configProps.readOnly,
     bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
-    bHideLabel$: configProps.hideLabel,
+    bHideLabel$: configProps.hideLabel
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Text/text.component.html.mustache

@@ -1,23 +1,28 @@
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
-<div *ngIf="bVisible$ && bHasForm$">
-  <div [formGroup]="formGroup$">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <mat-label>{{ label$ }}</mat-label>
-      <input
-        matInput
-        [placeholder]="placeholder"
-        type="text"
-        [value]="value$"
-        [required]="bRequired$"
-        [readonly]="bReadonly$"
-        [attr.data-test-id]="testId"
-        [formControl]="fieldControl"
-        (change)="fieldOnChange($event)"
-        (blur)="fieldOnBlur($event)"
-      />
-      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
-    </mat-form-field>
-  </div>
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
+<ng-template #noDisplayMode>
+  <div *ngIf="bVisible$ && bHasForm$">
+    <div [formGroup]="formGroup$">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-label>{{ label$ }}</mat-label>
+        <input
+          matInput
+          [placeholder]="placeholder"
+          type="text"
+          [value]="value$"
+          [required]="bRequired$"
+          [readonly]="bReadonly$"
+          [attr.data-test-id]="testId"
+          [formControl]="fieldControl"
+          (change)="fieldOnChange($event)"
+          (blur)="fieldOnBlur($event)"
+        />
+        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+      </mat-form-field>
+    </div>
+  </div>
+</ng-template>
 <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-Angular/field/Text/text.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/field/Text/text.component.ts.mustache

@@ -38,6 +38,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   bHideLabel$ = false;
   testId = '';
   helperText: string;
+  displayMode$?: string = '';
 
   controlName$: string;
   bHasForm$ = true;
@@ -100,15 +101,18 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   // updateSelf
   updateSelf(): void {
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
 
-    this.value$ = this.configProps$.value || '';
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    this.displayMode$ = this.configProps$.displayMode;
 
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/demo.stories.tsx.mustache

@@ -9,19 +9,30 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/text-email.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/text-email.component.ts.mustache

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on Email here
@@ -43,6 +44,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -139,7 +142,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -153,12 +159,16 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/demo.stories.tsx.mustache

@@ -9,19 +9,30 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/text.component.html.mustache

@@ -16,7 +16,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
+          (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/text.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/text.component.ts.mustache

@@ -8,6 +8,7 @@ import { AngularPConnectService, AngularPConnectData } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
@@ -15,7 +16,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 }
 
 @Component({
- selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
+  selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   standalone: true,
@@ -44,6 +45,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,7 +116,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
+
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
 
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
@@ -155,13 +161,15 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/demo.stories.tsx.mustache

@@ -9,25 +9,36 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getRawConfigProps: () => {
-        return rawConfigProps;
-      },
-      getFieldMetadata: () => {
-        return fieldMetadata;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getRawConfigProps: () => {
+          return rawConfigProps;
+        },
+        getFieldMetadata: () => {
+          return fieldMetadata;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.html.mustache

@@ -18,7 +18,8 @@
             [required]="bRequired$"
             [disabled]="bDisabled$"
             [formControl]="fieldControl"
-            (change)="fieldOnChange($event)"
+            (change)="fieldOnChange()"
+            (blur)="fieldOnBlur($event)"
           ></textarea>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
         </mat-form-field>

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.ts.mustache

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -44,6 +45,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   helperText: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,6 +116,9 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -140,7 +146,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -153,14 +159,15 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    // PConnect wants to use changeHandler for onChange
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {