diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index bb5c8db07e34..1d0a810eaeb2 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -2,7 +2,7 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiDelete, mdiDotsVertical } from "@mdi/js"; import { CSSResultGroup, LitElement, css, html } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -32,6 +32,10 @@ export default class HaScriptFieldRow extends LitElement { @property({ type: Boolean }) public disabled = false; + @state() private _error?: Record; + + private _errorKey?: string; + private _schema = memoizeOne( (selector: any) => [ @@ -73,7 +77,7 @@ export default class HaScriptFieldRow extends LitElement { const schema = this._schema(selector); - const data = { ...this.field, key: this.key }; + const data = { ...this.field, key: this._errorKey ?? this.key }; return html` @@ -115,9 +119,11 @@ export default class HaScriptFieldRow extends LitElement { @@ -157,8 +163,18 @@ export default class HaScriptFieldRow extends LitElement { // Don't allow to set an empty key, or duplicate an existing key. if (!value.key || this.excludeKeys.includes(value.key)) { + this._error = value.key + ? { + key: "key_not_unique", + } + : { + key: "key_not_null", + }; + this._errorKey = value.key ?? ""; return; } + this._errorKey = undefined; + this._error = undefined; // If we render the default with an incompatible selector, it risks throwing an exception and not rendering. // Clear the default when changing the selector. @@ -186,6 +202,10 @@ export default class HaScriptFieldRow extends LitElement { } }; + private _computeError = (error: string) => + this.hass.localize(`ui.panel.config.script.editor.field.${error}` as any) || + error; + static get styles(): CSSResultGroup { return [ haStyle, diff --git a/src/translations/en.json b/src/translations/en.json index c421721e91db..4072f2a42bac 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2989,7 +2989,9 @@ "required": "Required", "example": "Example", "default": "Default", - "selector": "Selector" + "selector": "Selector", + "key_not_null": "The field key must not be empty.", + "key_not_unique": "The field key must not be the same value as another field." }, "add_field": "Add field", "field_delete_confirm_title": "Delete field?",