Input & Textarea: emit kirbyChange on value change

apps/cookbook/src/app/examples/form-field-example/examples/input/counter-form.ts

@@ -0,0 +1,64 @@
+import { Component, Input } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormFieldModule, InputComponent } from '@kirbydesign/designsystem/form-field';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { InputSize } from '@kirbydesign/designsystem';
+import { ReactiveFormStateComponent } from '../../../reactive-form-state/reactive-form-state.component';
+import { ExampleConfigurationWrapperComponent } from '../../../example-configuration-wrapper/example-configuration-wrapper.component';
+
+const config = {
+  selector: 'cookbook-form-field-input-counter-form-example',
+  template: `<form [formGroup]="form">
+  <kirby-form-field>
+    <input 
+      kirby-input 
+      [size]="size" 
+      placeholder="Enter your message (max 140 chars)" 
+      #message 
+      maxlength="140"
+      formControlName="message"
+    />
+    <kirby-input-counter [listenTo]="message"></kirby-input-counter>
+  </kirby-form-field>
+
+  <button 
+    kirby-button 
+    attentionLevel="3" 
+    (click)="resetForm()"
+    [disabled]="!form.get('message').value"
+  >
+    Reset
+  </button>
+</form>
+<cookbook-example-configuration-wrapper>
+  <cookbook-reactive-form-state [form]="form"></cookbook-reactive-form-state>
+</cookbook-example-configuration-wrapper>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  imports: [
+    FormFieldModule,
+    InputComponent,
+    ReactiveFormsModule,
+    ButtonComponent,
+    ReactiveFormStateComponent,
+    ExampleConfigurationWrapperComponent,
+  ],
+})
+export class FormFieldInputCounterFormExampleComponent {
+  template: string = config.template;
+  form: FormGroup;
+  @Input() size: InputSize;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      message: [''],
+    });
+  }
+
+  resetForm() {
+    this.form.reset();
+  }
+}

apps/cookbook/src/app/examples/form-field-example/examples/textarea/counter-form.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormFieldModule, TextareaComponent } from '@kirbydesign/designsystem/form-field';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { ReactiveFormStateComponent } from '../../../reactive-form-state/reactive-form-state.component';
+import { ExampleConfigurationWrapperComponent } from '../../../example-configuration-wrapper/example-configuration-wrapper.component';
+
+const config = {
+  selector: 'cookbook-form-field-textarea-counter-form-example',
+  template: `<form [formGroup]="form">
+  <kirby-form-field>
+    <textarea 
+      kirby-textarea 
+      placeholder="Enter your message (max 140 chars)" 
+      #message 
+      maxlength="140"
+      formControlName="message"
+    ></textarea>
+    <kirby-input-counter [listenTo]="message"></kirby-input-counter>
+  </kirby-form-field>
+
+  <button 
+    kirby-button 
+    attentionLevel="3" 
+    (click)="resetForm()"
+    [disabled]="!form.get('message').value"
+  >
+    Reset
+  </button>
+</form>
+<cookbook-example-configuration-wrapper>
+  <cookbook-reactive-form-state [form]="form"></cookbook-reactive-form-state>
+</cookbook-example-configuration-wrapper>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  imports: [
+    FormFieldModule,
+    TextareaComponent,
+    ReactiveFormsModule,
+    ButtonComponent,
+    ReactiveFormStateComponent,
+    ExampleConfigurationWrapperComponent,
+  ],
+  standalone: true,
+})
+export class FormFieldTextareaCounterFormExampleComponent {
+  template: string = config.template;
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      message: [''],
+    });
+  }
+
+  resetForm() {
+    this.form.reset();
+  }
+}

apps/cookbook/src/app/examples/form-field-example/form-field-example.component.html

@@ -13,6 +13,9 @@ <h2>Input</h2>
 <cookbook-form-field-input-counter-example
   [size]="size"
 ></cookbook-form-field-input-counter-example>
+<cookbook-form-field-input-counter-form-example
+  [size]="size"
+></cookbook-form-field-input-counter-form-example>
 <cookbook-form-field-input-numeric-example
   [size]="size"
 ></cookbook-form-field-input-numeric-example>
@@ -33,6 +36,7 @@ <h2>Textarea</h2>
 <cookbook-form-field-textarea-example></cookbook-form-field-textarea-example>
 <cookbook-form-field-textarea-label-example></cookbook-form-field-textarea-label-example>
 <cookbook-form-field-textarea-counter-example></cookbook-form-field-textarea-counter-example>
+<cookbook-form-field-textarea-counter-form-example></cookbook-form-field-textarea-counter-form-example>
 
 <cookbook-example-configuration-wrapper configAppearance="toggle">
   <kirby-checkbox

apps/cookbook/src/app/examples/form-field-example/form-field-example.component.ts

@@ -11,6 +11,7 @@ import { FormFieldInputLabelExampleComponent } from './examples/input/label';
 import { FormFieldInputLabelMessageExampleComponent } from './examples/input/label-message';
 import { FormFieldInputAffixExampleComponent } from './examples/input/affix';
 import { FormFieldInputCounterExampleComponent } from './examples/input/counter';
+import { FormFieldInputCounterFormExampleComponent } from './examples/input/counter-form';
 import { FormFieldInputNumericExampleComponent } from './examples/input/numeric';
 import { FormFieldInputDateExampleComponent } from './examples/input/date';
 import { FormFieldInputDateNativeExampleComponent } from './examples/input/date-native';
@@ -21,6 +22,7 @@ import { FormFieldFocusExampleComponent } from './examples/input/focus';
 import { FormFieldTextareaDefaultExampleComponent } from './examples/textarea/default';
 import { FormFieldTextareaLabelExampleComponent } from './examples/textarea/label';
 import { FormFieldTextareaCounterExampleComponent } from './examples/textarea/counter';
+import { FormFieldTextareaCounterFormExampleComponent } from './examples/textarea/counter-form';
 
 @Component({
   selector: 'cookbook-form-field-example',
@@ -34,6 +36,7 @@ import { FormFieldTextareaCounterExampleComponent } from './examples/textarea/co
     FormFieldInputLabelMessageExampleComponent,
     FormFieldInputAffixExampleComponent,
     FormFieldInputCounterExampleComponent,
+    FormFieldInputCounterFormExampleComponent,
     FormFieldInputNumericExampleComponent,
     FormFieldInputDateExampleComponent,
     FormFieldInputDateNativeExampleComponent,
@@ -44,6 +47,7 @@ import { FormFieldTextareaCounterExampleComponent } from './examples/textarea/co
     FormFieldTextareaDefaultExampleComponent,
     FormFieldTextareaLabelExampleComponent,
     FormFieldTextareaCounterExampleComponent,
+    FormFieldTextareaCounterFormExampleComponent,
     ExampleConfigurationWrapperComponent,
     CheckboxComponent,
   ],

apps/cookbook/src/app/showcase/form-field-showcase/form-field-showcase.component.html

@@ -55,11 +55,19 @@ <h3>Character counter</h3>
   ></cookbook-form-field-input-counter-example>
 </cookbook-example-viewer>
 
+<h3>Character counter with form</h3>
+<cookbook-example-viewer [html]="inputCounterFormExample.template">
+  <cookbook-form-field-input-counter-form-example
+    [size]="size"
+    #inputCounterFormExample
+  ></cookbook-form-field-input-counter-form-example>
+</cookbook-example-viewer>
+
 <h3>Numeric</h3>
 <p>
-  The numeric input includes built in validation for rejecting non-numerical user input. As an example, Chrome completely restricts the
-  user to only enter numbers while Safari og Firefox allows the user to enter any character, but
-  will validate before the form is submitted.
+  The numeric input includes built in validation for rejecting non-numerical user input. As an
+  example, Chrome completely restricts the user to only enter numbers while Safari og Firefox allows
+  the user to enter any character, but will validate before the form is submitted.
 </p>
 <p>When using a numeric field from a device, it will show the numeric keyboard to the user.</p>
 <cookbook-example-viewer [html]="inputNumericExample.template">
@@ -221,6 +229,13 @@ <h3>Character counter</h3>
   ></cookbook-form-field-textarea-counter-example>
 </cookbook-example-viewer>
 
+<h3>Character counter with form</h3>
+<cookbook-example-viewer [html]="textareaCounterFormExample.template">
+  <cookbook-form-field-textarea-counter-form-example
+    #textareaCounterFormExample
+  ></cookbook-form-field-textarea-counter-form-example>
+</cookbook-example-viewer>
+
 <h2>Form Field</h2>
 <h4>Properties:</h4>
 <cookbook-api-description-properties

apps/cookbook/src/app/showcase/form-field-showcase/form-field-showcase.component.ts

@@ -8,6 +8,7 @@ import { FormFieldInputLabelExampleComponent } from '../../examples/form-field-e
 import { FormFieldInputLabelMessageExampleComponent } from '../../examples/form-field-example/examples/input/label-message';
 import { FormFieldInputAffixExampleComponent } from '../../examples/form-field-example/examples/input/affix';
 import { FormFieldInputCounterExampleComponent } from '../../examples/form-field-example/examples/input/counter';
+import { FormFieldInputCounterFormExampleComponent } from '../../examples/form-field-example/examples/input/counter-form';
 import { FormFieldInputNumericExampleComponent } from '../../examples/form-field-example/examples/input/numeric';
 import { FormFieldInputDecimalMaskExampleComponent } from '../../examples/form-field-example/examples/input/decimal-mask';
 import { FormFieldInputDateExampleComponent } from '../../examples/form-field-example/examples/input/date';
@@ -19,9 +20,11 @@ import { FormFieldFocusExampleComponent } from '../../examples/form-field-exampl
 import { FormFieldTextareaDefaultExampleComponent } from '../../examples/form-field-example/examples/textarea/default';
 import { FormFieldTextareaLabelExampleComponent } from '../../examples/form-field-example/examples/textarea/label';
 import { FormFieldTextareaCounterExampleComponent } from '../../examples/form-field-example/examples/textarea/counter';
+import { FormFieldTextareaCounterFormExampleComponent } from '../../examples/form-field-example/examples/textarea/counter-form';
 import { ApiDescriptionPropertiesComponent } from '../../shared/api-description/api-description-properties/api-description-properties.component';
 import { ApiDescriptionMethodsComponent } from '../../shared/api-description/api-description-methods/api-description-methods.component';
 import { ApiDescriptionEventsComponent } from '../../shared/api-description/api-description-events/api-description-events.component';
+import { CodeViewerComponent } from '../../shared/code-viewer/code-viewer.component';
 import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
 import { ApiDescriptionMethod } from '~/app/shared/api-description/api-description-methods/api-description-methods.component';
 import { ApiDescriptionEvent } from '~/app/shared/api-description/api-description-events/api-description-events.component';
@@ -39,6 +42,7 @@ import { ApiDescriptionEvent } from '~/app/shared/api-description/api-descriptio
     FormFieldInputLabelMessageExampleComponent,
     FormFieldInputAffixExampleComponent,
     FormFieldInputCounterExampleComponent,
+    FormFieldInputCounterFormExampleComponent,
     FormFieldInputNumericExampleComponent,
     FormFieldInputDecimalMaskExampleComponent,
     FormFieldInputDateExampleComponent,
@@ -50,9 +54,11 @@ import { ApiDescriptionEvent } from '~/app/shared/api-description/api-descriptio
     FormFieldTextareaDefaultExampleComponent,
     FormFieldTextareaLabelExampleComponent,
     FormFieldTextareaCounterExampleComponent,
+    FormFieldTextareaCounterFormExampleComponent,
     ApiDescriptionPropertiesComponent,
     ApiDescriptionMethodsComponent,
     ApiDescriptionEventsComponent,
+    CodeViewerComponent,
   ],
 })
 export class FormFieldShowcaseComponent {