<form #form="ngForm" [formGroup]="codeForm">
    <nx-code-input
        #codeInput
        [length]="4"
        convertTo="upper"
        formControlName="keyCode"
    >
        @if (keyCode?.hasError('required')) {
        <nx-error class="nx-margin-y-xs"> Entry is required. </nx-error>
        } @if (keyCode?.hasError('pattern')) {
        <nx-error class="nx-margin-y-xs"> Entry must match pattern. </nx-error>
        } @if (keyCode?.hasError('minlength')) {
        <nx-error class="nx-margin-y-xs"> Entry is too short. </nx-error>
        }
    </nx-code-input>

    <p>Disabled: {{ this.keyCode?.disabled }}</p>
    <button nxButton="primary small" type="submit">Submit</button>
    <button nxButton="secondary small" (click)="form.resetForm()" type="button">
        Clear
    </button>
    <button nxButton="primary small" (click)="toggleDisabled()" type="button">
        Toggle disabled
    </button>
</form>
