Add preview for template (#17699)

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

@@ -70,7 +70,7 @@ class StepFlowForm extends LitElement {
         ></ha-form>
       </div>
       ${step.preview
-        ? html`<div class="preview">
+        ? html`<div class="preview" @set-flow-errors=${this._setError}>
             <h3>
               ${this.hass.localize(
                 "ui.panel.config.integrations.config_flow.preview"
@@ -107,6 +107,10 @@ class StepFlowForm extends LitElement {
     `;
   }
 
+  private _setError(ev: CustomEvent) {
+    this.step = { ...this.step, errors: ev.detail };
+  }
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     setTimeout(() => this.shadowRoot!.querySelector("ha-form")!.focus(), 0);
@@ -253,6 +257,9 @@ class StepFlowForm extends LitElement {
 }
 
 declare global {
+  interface HASSDomEvents {
+    "set-flow-errors": { errors: DataEntryFlowStepForm["errors"] };
+  }
   interface HTMLElementTagNameMap {
     "step-flow-form": StepFlowForm;
   }