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>
      <GoabxFormItem label="Name" requirement="required">
        <GoabxInput
          name="input"
          type="text"
          onChange={handleInputChange}
          value={inputValue}
          width="100%"
        />
      </GoabxFormItem>

      <GoabButtonGroup alignment="start" mt="xl">
        <GoabxButton disabled={inputValue.trim() === ""} onClick={handleConfirm}>
          Confirm
        </GoabxButton>
        <GoabxButton type="secondary" onClick={handleCancel}>
          Cancel
        </GoabxButton>
      </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>
  <goabx-form-item label="Name" requirement="required">
    <goabx-input
      name="input"
      type="text"
      (onChange)="onInputChange($event)"
      [value]="inputValue"
      width="100%">
    </goabx-input>
  </goabx-form-item>

  <goab-button-group alignment="start" mt="xl">
    <goabx-button [disabled]="isDisabled" (onClick)="onConfirm()">
      Confirm
    </goabx-button>
    <goabx-button type="secondary" (onClick)="onCancel()">
      Cancel
    </goabx-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>