Slotted error text in a form item

const [value, setValue] = useState("");

const onChange = (detail: GoabInputOnChangeDetail) => {
  setValue(detail.value);
};

const errorMessage = (
  <>
    <i>This is </i> slotted <b>error text</b>.
  </>
);

<GoabFormItem label="First name" error={errorMessage}>
  <GoabInput onChange={onChange} value={value} name="item" error={true} />
</GoabFormItem>

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    item: [""],
  });
}

<goab-form-item label="First name" [formGroup]="form" [error]="errorTemplate">
  <goab-input name="item" formControlName="item" [error]="true"></goab-input>
  <ng-template #errorTemplate>
    <span>This is </span>
    <i>slotted </i>
    <b>error text.</b>
  </ng-template>
</goab-form-item>

const input = document.querySelector('goa-input[name="item"]');
input.addEventListener("_change", (e) => {
  console.log("Value changed:", e.detail.value);
});

<goa-form-item version="2" label="First name">
  <goa-input version="2" name="item" error="true"></goa-input>
  <div slot="error">
    <span>This is </span>
    <i>slotted </i>
    <b>error text.</b>
  </div>
</goa-form-item>