Merge pull request #829 from dxc-technology/jialecl-textInputError

[Major]Error behaviour when empty string  in textInput

Author: aidamag

projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html

@@ -94,8 +94,9 @@
       the component. An object including the string value, the error and the
       date value will be emitted. An example of this object is:
       {{ "{" }} <code>value: value, error: error, date: date</code>{{ "}" }}. If
-      the string value is a valid date, <code>error</code> will be null. Also,
-      if the string value is not a valid date, <code>date</code> will be null.
+      the string value is a valid date, <code>error</code> will be undefined.
+      Also, if the string value is not a valid date, <code>date</code> will be
+      undefined.
     </td>
   </tr>
   <tr>
@@ -108,8 +109,8 @@
       {{ "{" }}
       <code>value: value, error: error, date: date</code>
       {{ "}" }}. If the string value is a valid date, <code>error</code> will be
-      null. Also, if the string value is not a valid date,
-      <code>date</code> will be null.
+      undefined. Also, if the string value is not a valid date,
+      <code>date</code> will be undefined.
     </td>
   </tr>
   <tr>

projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html

@@ -70,7 +70,7 @@
       is lower than min, the onBlur and onChange functions will be called with
       the current value and an internal error informing that the current value
       is not correct. If a valid state is reached, the error parameter will be
-      null in both events.
+      undefined in both events.
     </td>
   </tr>
   <tr>
@@ -80,7 +80,7 @@
       Maximum value allowed by the number input. If the typed value by the user
       surpasses max, the onBlur and onChange functions will be called with the
       current value and an internal error informing that the current value is
-      not correct. If a valid state is reached, the error parameter will be null
+      not correct. If a valid state is reached, the error parameter will be undefined
       in both events.
     </td>
   </tr>
@@ -110,7 +110,7 @@
       value entered is not valid) will be passed to this function. An example of
       this object is: {{ "{ " }}
       <code>value: value, error: error</code>
-      {{ "}" }}. If there is no error, error will be null.
+      {{ "}" }}. If there is no error, error will be undefined.
     </td>
   </tr>
   <tr>
@@ -121,7 +121,7 @@
       including the value and the error (if the value entered is not valid) will
       be passed to this function. An example of this object is: {{ "{" }}
       <code>value: value, error: error</code>
-      {{ "}" }}. If there is no error, error will be null.
+      {{ "}" }}. If there is no error, error will be undefined.
     </td>
   </tr>
   <tr>

projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html

@@ -59,7 +59,7 @@
       value entered is not valid) will be passed to this function. An example of
       this object is:
       {{ "{" }} <code>value: value, error: error</code>{{ "}" }}. If there is no
-      error, error will be null.
+      error, error will be undefined.
     </td>
   </tr>
   <tr>
@@ -71,7 +71,7 @@
       valid) will be passed to this function. An example of this object is:
       {{ "{" }}
       <code>value: value, error: error</code>
-      {{ "}" }}. If there is no error, error will be null.
+      {{ "}" }}. If there is no error, error will be undefined.
     </td>
   </tr>
   <tr>
@@ -93,7 +93,7 @@
       pattern, the onBlur and onChange functions will be called with the current
       value and an internal error informing that this value does not match the
       pattern. If the pattern is met, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>
@@ -106,7 +106,7 @@
       onChange functions will be called with the current value and an internal
       error informing that the value length does not comply the specified range.
       If a valid length is reached, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>
@@ -119,7 +119,7 @@
       onChange functions will be called with the current value and an internal
       error informing that the value length does not comply the specified range.
       If a valid length is reached, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>

projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html

@@ -55,9 +55,12 @@
     <td>error: string</td>
     <td></td>
     <td>
-      If it is defined, the component will change its appearance, showing the
-      error below the input component. If it is not defined, the error messages
-      will be created and managed internally.
+      If it is a defined value and also a truthy string, the component will
+      change its appearance, showing the error below the input component. If the
+      defined value is an empty string, it will reserve a space below the
+      component for a future error, but it would not change its look. In case of
+      being undefined or undefined, both the appearance and the space for the error
+      message would not be modified.
     </td>
   </tr>
   <tr>
@@ -81,20 +84,22 @@
     <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user types within the input. The new
-      value will be passed as a parameter.
+      This event will emit when the user types within the input element
+      of the component. An object including the current value and the error (if
+      the value entered is not valid) will be passed to this function. An
+      example of this object is: {{ "{" }} value: value, error: error {{ "}" }}. If there is no
+      error, error will not be defined.
     </td>
   </tr>
   <tr>
     <td>onBlur: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the input loses the focus. An object
+      This event will emit when the input element loses the focus. An object
       including the input value and the error (if the value entered is not
-      valid) will be passed to this function. An example of this object is:
-      {{ "{" }}
-      <code>value: value, error: error</code>
-      {{ "}" }}. If there is no error, error will be null.
+      valid) will be passed to this function. An example of this object is: {{ "{" }}
+      value: value, error: error {{ "}" }}. If there is no error, error will not be
+      defined.
     </td>
   </tr>
   <tr>
@@ -121,7 +126,7 @@
       does not match the pattern, the onBlur function will be called with the
       value entered and the error informing that the value does not match the
       pattern as parameters. If the pattern is accomplished, the error parameter
-      will be null.
+      will be undefined.
     </td>
   </tr>
   <tr>
@@ -149,7 +154,7 @@
       onChange functions will be called with the current value and an internal
       error informing that the value length does not comply the specified range.
       If a valid length is reached, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>
@@ -162,7 +167,7 @@
       onChange functions will be called with the current value and an internal
       error informing that the value length does not comply the specified range.
       If a valid length is reached, the error parameter of both events will be
-      null.
+      undefined.
     </td>
   </tr>
   <tr>

projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts

@@ -138,7 +138,7 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: newValue } });
     expect(onChange).toHaveBeenCalledWith({
       value: newValue,
-      error: null,
+      error: undefined,
       date: newMockDate,
     });
     expect(screen.getByDisplayValue(newValue));
@@ -180,7 +180,7 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: newValue } });
     expect(onChange).toHaveBeenCalledWith({
       value: newValue,
-      error: null,
+      error: undefined,
       date: newMockDate,
     });
     expect(screen.getByDisplayValue(newValue));
@@ -189,7 +189,7 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: "04-10-1996" } });
     expect(onChange).toHaveBeenCalledWith({
       value: "04-10-1996",
-      error: null,
+      error: undefined,
       date: new Date("1996/10/04"),
     });
     expect(screen.getByDisplayValue("04-10-1996"));
@@ -237,7 +237,7 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: "1995/12/03" } });
     expect(onChange).toHaveBeenCalledWith({
       value: "1995/12/03",
-      error: null,
+      error: undefined,
       date: newMockDate,
     });
     input.focus();
@@ -290,8 +290,8 @@ describe("DxcDate", () => {
 
     expect(onChange).toHaveBeenCalledWith({
       value: invalidValue,
-      error: null,
-      date: null,
+      error: undefined,
+      date: undefined,
     });
   });
 
@@ -481,14 +481,14 @@ describe("DxcDate", () => {
     fireEvent.input(input, { target: { value: "03-10-1996" } });
     expect(onChange).toHaveBeenCalledWith({
       value: "03-10-1996",
-      error: null,
+      error: undefined,
       date: new Date("1996/10/03"),
     });
     expect(screen.getByDisplayValue("03-12-1995"));
     fireEvent.blur(input);
     waitFor(() => {
       expect(onBlur).toHaveBeenCalledWith({
-        error: null,
+        error: undefined,
         value: "03-12-1995",
         date: new Date("1995/12/03"),
       });

projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts

@@ -147,14 +147,14 @@ export class DxcDateInputComponent implements OnInit {
 
   /**
    * This event will emit in case the user types within the input element of the component. An object including the string value,
-   * the error and the date value will be emitted. If the string value is a valid date, error will be null.
-   * Also, if the string value is not a valid date, date will be null.
+   * the error and the date value will be emitted. If the string value is a valid date, error will be undefined.
+   * Also, if the string value is not a valid date, date will be undefined.
    */
   @Output() onChange = new EventEmitter<EmittedValue>();
   /**
    * This event will emit in case the input element loses the focus. An object including the string value,
-   * the error and the date value will be emitted. If the string value is a valid date, error will be null.
-   * Also, if the string value is not a valid date, date will be null.
+   * the error and the date value will be emitted. If the string value is a valid date, error will be undefined.
+   * Also, if the string value is not a valid date, date will be undefined.
    */
   @Output() onBlur = new EventEmitter<EmittedValue>();
   /**
@@ -283,7 +283,7 @@ export class DxcDateInputComponent implements OnInit {
     let _dateReturn = {
       value: value.value,
       error: value.error,
-      date: _dateValue.isValid() ? _dateValue.toDate() : null,
+      date: _dateValue.isValid() ? _dateValue.toDate() : undefined,
     };
     this.onChange.emit(_dateReturn);
 
@@ -302,7 +302,7 @@ export class DxcDateInputComponent implements OnInit {
     this.onBlur.emit({
       value: event.value,
       error: event.error,
-      date: _dateValue.isValid() ? _dateValue.toDate() : null,
+      date: _dateValue.isValid() ? _dateValue.toDate() : undefined,
     });
     if (!this.controlled) {
       this.renderedValue = event.value;
@@ -315,7 +315,7 @@ export class DxcDateInputComponent implements OnInit {
     let _stringValue = this.getDateStringValue(value, this.format);
     let _dateReturn = {
       value: _stringValue,
-      date: value.isValid() ? value.toDate() : null,
+      date: value.isValid() ? value.toDate() : undefined,
       error: this.dxcInputRef.error,
     };
     this.onChange.emit(_dateReturn);

projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.spec.ts

@@ -80,7 +80,7 @@ describe("DxcNumberInputComponent", () => {
     input.focus();
     expect(input).toHaveFocus();
     fireEvent.click(screen.getByLabelText("Increment"));
-    expect(onChange).toHaveBeenCalledWith({ value: "10", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "10", error: undefined });
   });
 
   test("decrease should call onChange in dxc-number", async () => {
@@ -105,7 +105,7 @@ describe("DxcNumberInputComponent", () => {
     input.focus();
     expect(input).toHaveFocus();
     fireEvent.click(screen.getByLabelText("Decrement"));
-    expect(onChange).toHaveBeenCalledWith({ value: "5", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "5", error: undefined });
   });
 
   test("controlled dxc-number", async () => {
@@ -135,7 +135,7 @@ describe("DxcNumberInputComponent", () => {
     expect(input.max).toBe("100");
     expect(screen.getByDisplayValue("4")).toBeTruthy();
     fireEvent.input(input, { target: { value: "10" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "10", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "10", error: undefined });
     expect(screen.getByDisplayValue("4")).toBeTruthy();
   });
 
@@ -170,7 +170,7 @@ describe("DxcNumberInputComponent", () => {
     expect(input.max).toBe("100");
     expect(screen.getByDisplayValue("4"));
     fireEvent.input(input, { target: { value: "10" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "10", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "10", error: undefined });
     expect(screen.getByDisplayValue("4"));
     fireEvent.blur(input);
     waitFor(() => {

projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts

@@ -75,7 +75,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
    * lower than min, the onBlur and onChange functions will be called with
    * the current value and an internal error informing that the current
    * value is not correct. If a valid state is reached, the error parameter
-   * will be null in both events.
+   * will be undefined in both events.
    */
   @Input()
   get min(): number {
@@ -90,7 +90,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
    * surpasses max, the onBlur and onChange functions will be called with
    * the current value and an internal error informing that the current
    * value is not correct. If a valid state is reached, the error parameter
-   * will be null in both events.
+   * will be undefined in both events.
    */
   @Input()
   get max(): number {
@@ -174,14 +174,14 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
    * This event will emit in case the user types within the input
    * element of the component. An object including the current value and
    * the error (if the value entered is not valid) will be passed to this
-   * function. If there is no error, error will be null.
+   * function. If there is no error, error will be undefined.
    */
   @Output() onChange = new EventEmitter<OnChangeEvent>();
   /**
    * This event will emit in case the number loses the focus.
    * An object including the input value and the error (if the value
    * entered is not valid) will be passed to this function. If there is no error,
-   * error will be null.
+   * error will be undefined.
    */
   @Output() onBlur = new EventEmitter<OnBlurEvent>();
   @ViewChild("dxcInputRef", { static: false })
@@ -305,7 +305,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
       currentValue = coerceNumberProperty(this.value);
     }
     let calculatedValue = this.calculateMinus(currentValue);
-    this.handleOnChange({ value: calculatedValue.toString(), error: null });
+    this.handleOnChange({ value: calculatedValue.toString(), error: undefined });
     this.dxcInputRef.inputRef.nativeElement.focus();
   }
 
@@ -318,7 +318,7 @@ export class DxcNumberInputComponent implements OnInit, OnChanges, OnDestroy {
       currentValue = coerceNumberProperty(this.value);
     }
     let calculatedValue = this.calculatePlus(currentValue);
-    this.handleOnChange({ value: calculatedValue.toString(), error: null });
+    this.handleOnChange({ value: calculatedValue.toString(), error: undefined });
     this.dxcInputRef.inputRef.nativeElement.focus();
   }