diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html
index 41a319736..b1f571981 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/date-input/date-properties/date-properties.component.html
+++ b/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:
{{ "{" }} value: value, error: error, date: date{{ "}" }}. 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 string value is a valid date, error will be undefined.
+ Also, if the string value is not a valid date, date will be
+ undefined.
@@ -108,8 +109,8 @@
{{ "{" }}
value: value, error: error, date: date
{{ "}" }}. 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.
+ undefined. Also, if the string value is not a valid date,
+ date will be undefined.
diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html
index 429e559e9..52832569d 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/number-input/number-properties/number-properties.component.html
+++ b/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.
@@ -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.
@@ -110,7 +110,7 @@
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 be null.
+ {{ "}" }}. If there is no error, error will be undefined.
@@ -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: {{ "{" }}
value: value, error: error
- {{ "}" }}. If there is no error, error will be null.
+ {{ "}" }}. If there is no error, error will be undefined.
diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html
index 98b0d459a..5c5a86dc5 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html
+++ b/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:
{{ "{" }} value: value, error: error{{ "}" }}. If there is no
- error, error will be null.
+ error, error will be undefined.
@@ -71,7 +71,7 @@
valid) will be passed to this function. An example of this object is:
{{ "{" }}
value: value, error: error
- {{ "}" }}. If there is no error, error will be null.
+ {{ "}" }}. If there is no error, error will be undefined.
@@ -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.
@@ -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.
@@ -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.
diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
index 1c333571e..98e5ddacc 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html
@@ -55,9 +55,12 @@
| error: string |
|
- 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.
|
@@ -81,20 +84,22 @@
| onChange: EventEmitter |
|
- 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.
|
| onBlur: EventEmitter |
|
- 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:
- {{ "{" }}
- value: value, error: error
- {{ "}" }}. 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.
|
@@ -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.
@@ -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.
@@ -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.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts
index 7b50d09c8..2e55aa4dc 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.spec.ts
+++ b/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"),
});
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts
index 2277bbc8d..fb6c013fd 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-date-input/dxc-date-input.component.ts
+++ b/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();
/**
* 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();
/**
@@ -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);
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.spec.ts
index 35c392ed4..bada23312 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.spec.ts
+++ b/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(() => {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts
index 5b3c3dad8..494017595 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-number-input/dxc-number-input.component.ts
+++ b/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();
/**
* 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();
@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();
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts
index 5a22ddb22..65cae5078 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts
@@ -73,7 +73,7 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
* the 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.
+ * events will be undefined.
*/
@Input() pattern: string;
/**
@@ -83,7 +83,7 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
* comply the minimum length, the onBlur and 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.
+ * reached, the error parameter of both events will be undefined.
*/
@Input() minLength: number;
/**
@@ -93,7 +93,7 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
* comply the maximum length, the onBlur and 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.
+ * reached, the error parameter of both events will be undefined.
*/
@Input() maxLength: number;
/**
@@ -135,13 +135,13 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges {
* This function will be called 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. If there is no error, error will be null.
+ * function. If there is no error, error will be undefined.
* */
@Output() onChange = new EventEmitter();
/**
* This function will be called 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. If there is no error, error will be null.
+ * not valid) will be passed to this function. If there is no error, error will be undefined.
*/
@Output() onBlur = new EventEmitter();
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html
index 043fd1889..d7255a97f 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html
@@ -172,4 +172,6 @@
-{{ error }}
+{{
+ error
+}}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts
index a9b128b86..541195bb1 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts
@@ -147,7 +147,7 @@ describe("DxcNewTextInputComponent", () => {
expect(input.getByText("helper text"));
expect(screen.getByDisplayValue("test input value")).toBeTruthy();
fireEvent.click(input.getByLabelText("Clear"));
- expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+ expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
});
test("should allow interaction with action button", async () => {
@@ -238,7 +238,7 @@ describe("DxcNewTextInputComponent", () => {
expect(input.getByText("helper text"));
expect(screen.getByDisplayValue("test input value")).toBeTruthy();
fireEvent.click(input.getByRole("textbox"));
- expect(onChange).not.toHaveBeenCalledWith({ value: "", error: null });
+ expect(onChange).not.toHaveBeenCalledWith({ value: "", error: undefined });
});
test("controlled dxc-input-text input change and blur", async () => {
@@ -265,9 +265,9 @@ describe("DxcNewTextInputComponent", () => {
fireEvent.click(input);
expect(screen.getByDisplayValue("initial"));
fireEvent.input(input, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+ expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
fireEvent.blur(input);
- expect(onBlur).toHaveBeenCalledWith({ error: null, value: "initial" });
+ expect(onBlur).toHaveBeenCalledWith({ error: undefined, value: "initial" });
await waitFor(() => {
expect(screen.getByDisplayValue("initial"));
});
@@ -296,9 +296,9 @@ describe("DxcNewTextInputComponent", () => {
fireEvent.click(input);
expect(screen.getByDisplayValue(""));
fireEvent.input(input, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+ expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
fireEvent.blur(input);
- expect(onBlur).toHaveBeenCalledWith({ error: null, value: "new value" });
+ expect(onBlur).toHaveBeenCalledWith({ error: undefined, value: "new value" });
await waitFor(() => {
expect(screen.getByDisplayValue("new value"));
});
@@ -353,15 +353,15 @@ describe("DxcNewTextInputComponent", () => {
fireEvent.click(input);
expect(screen.getByDisplayValue("initial string"));
fireEvent.input(input, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+ expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
await waitFor(() => {
fireEvent.blur(input);
expect(onBlur).toHaveBeenCalledWith({
- error: null,
+ error: undefined,
value: "initial string",
});
fireEvent.click(screen.getByLabelText("Clear"));
- expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+ expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
screen.getByDisplayValue("initial string");
});
});
@@ -407,7 +407,7 @@ describe("DxcNewTextInputComponent", () => {
});
fireEvent.click(screen.getByLabelText("Clear"));
await waitFor(() => {
- expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+ expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
expect(screen.getByDisplayValue("initial"));
});
});
@@ -454,7 +454,7 @@ describe("DxcNewTextInputComponent", () => {
});
fireEvent.click(screen.getByLabelText("Clear"));
await waitFor(() => {
- expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+ expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
expect(screen.getByDisplayValue("initial"));
});
});
@@ -484,11 +484,11 @@ describe("DxcNewTextInputComponent", () => {
fireEvent.click(input);
expect(screen.getByDisplayValue("initial string"));
fireEvent.input(input, { target: { value: "new value" } });
- expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+ expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
await waitFor(() => {
fireEvent.blur(input);
expect(onBlur).toHaveBeenCalledWith({
- error: null,
+ error: undefined,
value: "initial string",
});
fireEvent.click(screen.getByLabelText("Clear"));
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
index ebc0ef214..db8abc25d 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts
@@ -106,18 +106,21 @@ export class DxcTextInputComponent
*/
@Input() clearable: boolean = false;
/**
- * 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 managed internally, but never displayed on its own.
+ * 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 null, both the appearance and the space for the error
+ * message would not be modified.
*/
- @Input() error: string = "";
+ @Input() error: string = undefined;
/**
* Regular expression that defines the valid format allowed by the input.
* This will be checked when the input loses the focus. If the value entered
* does not match the pattern, the onBlur event will emit 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.
+ * undefined.
*/
@Input() pattern: string;
/**
@@ -126,7 +129,7 @@ export class DxcTextInputComponent
* the string entered does not comply the minimum length, the onBlur and
* onChange events will emit 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.
+ * valid length is reached, the error parameter of both events will be undefined.
*/
@Input() minLength: number;
/**
@@ -135,7 +138,7 @@ export class DxcTextInputComponent
* the string entered does not comply the maximum length, the onBlur and
* onChange events will emit 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.
+ * valid length is reached, the error parameter of both events will be undefined.
*/
@Input() maxLength: number;
/**
@@ -167,7 +170,7 @@ export class DxcTextInputComponent
defaultInputs = new BehaviorSubject({
placeholder: "",
- error: "",
+ error: undefined,
clearable: false,
optional: false,
disabled: false,
@@ -181,18 +184,20 @@ export class DxcTextInputComponent
size: "medium",
});
/**
- * This event will be 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
- * event. If there is no error, error will be null.
+ * 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.
*/
@Output()
onChange = new EventEmitter();
/**
- * 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 event. If there is no error,
- * error will be null.
+ * 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: {
+ * value: value, error: error }. If there is no error, error will not be
+ * defined.
*/
@Output()
onBlur = new EventEmitter();
@@ -504,7 +509,7 @@ export class DxcTextInputComponent
return `Min length ${this.minLength}, Max length ${this.maxLength}`;
if (value && !this.patternMatch(this.pattern, value))
return `Please use a valid pattern`;
- return null;
+ return undefined;
}
private handleValidationError() {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts
index d2d7e6838..c2677290d 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts
@@ -1,6 +1,6 @@
type EmittedValue = {
value: string;
- error: string;
+ error?: string;
};
export default EmittedValue;