Disabled button with a required field

const [inputValue, setInputValue] = useState("");

const handleInputChange = (detail: GoabInputOnChangeDetail) => {
  setInputValue(detail.value);
};

const handleConfirm = () => {
  // Handle form submission
  console.log("Form submitted with:", inputValue);
};

const handleCancel = () => {
  // Handle cancellation
  setInputValue("");
};

<form>
  <GoabFormItem label="Name" requirement="required">
    <GoabInput
      name="input"
      type="text"
      onChange={handleInputChange}
      value={inputValue}
      width="100%"
    />
  </GoabFormItem>

  <GoabButtonGroup alignment="start" mt="xl">
    <GoabButton disabled={inputValue.trim() === ""} onClick={handleConfirm}>
      Confirm
    </GoabButton>
    <GoabButton type="secondary" onClick={handleCancel}>
      Cancel
    </GoabButton>
  </GoabButtonGroup>
</form>

inputValue = "";

onInputChange(detail: GoabInputOnChangeDetail): void {
  this.inputValue = detail.value;
}

onConfirm(): void {
  // Handle form submission
  console.log("Form submitted with:", this.inputValue);
}

onCancel(): void {
  // Handle cancellation
  this.inputValue = "";
}

get isDisabled(): boolean {
  return this.inputValue.trim() === "";
}

<form>
  <goab-form-item label="Name" requirement="required">
    <goab-input
      name="input"
      type="text"
      (onChange)="onInputChange($event)"
      [value]="inputValue"
      width="100%"
    >
    </goab-input>
  </goab-form-item>

  <goab-button-group alignment="start" mt="xl">
    <goab-button [disabled]="isDisabled" (onClick)="onConfirm()"> Confirm </goab-button>
    <goab-button type="secondary" (onClick)="onCancel()"> Cancel </goab-button>
  </goab-button-group>
</form>

const nameInput = document.getElementById("name-input");
const confirmBtn = document.getElementById("confirm-btn");
const cancelBtn = document.getElementById("cancel-btn");

nameInput.addEventListener("_change", (e) => {
  const value = e.detail.value.trim();
  if (value === "") {
    confirmBtn.setAttribute("disabled", "true");
  } else {
    confirmBtn.removeAttribute("disabled");
  }
});

confirmBtn.addEventListener("_click", () => {
  console.log("Form submitted with:", nameInput.value);
});

cancelBtn.addEventListener("_click", () => {
  nameInput.value = "";
  confirmBtn.setAttribute("disabled", "true");
});

<form id="required-field-form">
  <goa-form-item version="2" label="Name" requirement="required">
    <goa-input
      version="2"
      id="name-input"
      name="input"
      type="text"
      width="100%"
    ></goa-input>
  </goa-form-item>

  <goa-button-group alignment="start" mt="xl">
    <goa-button version="2" id="confirm-btn" disabled="true">Confirm</goa-button>
    <goa-button version="2" id="cancel-btn" type="secondary">Cancel</goa-button>
  </goa-button-group>
</form>