Allow config flow to show error per field (#19522)

src/components/ha-alert.ts

@@ -154,6 +154,10 @@ class HaAlert extends LitElement {
     .issue-type.success::after {
       background-color: var(--success-color);
     }
+    :host ::slotted(ul) {
+      margin: 0;
+      padding-inline-start: 20px;
+    }
   `;
 }
 

src/components/ha-form/ha-form.ts

@@ -45,7 +45,10 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property({ attribute: false }) public schema!: readonly HaFormSchema[];
 
-  @property({ attribute: false }) public error?: Record<string, string>;
+  @property({ attribute: false }) public error?: Record<
+    string,
+    string | string[]
+  >;
 
   @property({ attribute: false }) public warning?: Record<string, string>;
 
@@ -228,7 +231,20 @@ export class HaForm extends LitElement implements HaFormElement {
     return this.computeHelper ? this.computeHelper(schema) : "";
   }
 
-  private _computeError(error, schema: HaFormSchema | readonly HaFormSchema[]) {
+  private _computeError(
+    error: string | string[],
+    schema: HaFormSchema | readonly HaFormSchema[]
+  ): string | TemplateResult {
+    if (Array.isArray(error)) {
+      return html`<ul>
+        ${error.map(
+          (err) =>
+            html`<li>
+              ${this.computeError ? this.computeError(err, schema) : err}
+            </li>`
+        )}
+      </ul>`;
+    }
     return this.computeError ? this.computeError(error, schema) : error;
   }
 

src/dialogs/config-flow/step-flow-form.ts

@@ -201,8 +201,19 @@ class StepFlowForm extends LitElement {
         step,
       });
     } catch (err: any) {
-      this._errorMsg =
+      if (err && err.body) {
-        (err && err.body && err.body.message) || "Unknown error occurred";
+        if (err.body.message) {
+          this._errorMsg = err.body.message;
+        }
+        if (err.body.errors) {
+          this.step = { ...this.step, errors: err.body.errors };
+        }
+        if (!err.body.message && !err.body.errors) {
+          this._errorMsg = "Unknown error occurred";
+        }
+      } else {
+        this._errorMsg = "Unknown error occurred";
+      }
     } finally {
       this._loading = false;
     }