<div nxLayout="grid">
    <div nxRow>
        <div nxCol="6">
            <h4 nxHeadline="subsection-xsmall">With mask validation</h4>

            <form [formGroup]="validatedMaskForm">
                <nx-formfield label="Time">
                    <input
                        nxInput
                        nxMask="00:00:00"
                        formControlName="maskInput"
                    />
                    <span nxFormfieldHint> Mask: 00:00:00 </span>
                    @if
                    (validatedMaskForm.get('maskInput')?.hasError('required')) {
                    <nx-error nxFormfieldError>
                        This field is required.
                    </nx-error>
                    } @if
                    (validatedMaskForm.get('maskInput')?.hasError('nxMaskLengthError'))
                    {
                    <nx-error nxFormfieldError>
                        Please enter a valid length.
                    </nx-error>
                    }
                </nx-formfield>
                <button
                    nxButton="primary small"
                    type="submit"
                    class="nx-margin-bottom-s"
                >
                    submit
                </button>
            </form>

            Form value: {{ validatedMaskForm.value | json }}<br />
            Testform: {{ validatedMaskForm.status | json }} <br />
            Validation errors: {{ validatedMaskForm.get('maskInput')?.errors |
            json }}
        </div>
        <div nxCol="6">
            <h4 nxHeadline="subsection-xsmall">Without mask validation</h4>

            <form [formGroup]="unvalidatedMaskForm">
                <nx-formfield label="Time">
                    <input
                        nxInput
                        nxMask="00:00:00"
                        formControlName="maskInput2"
                        validateMask="false"
                    />
                    <span nxFormfieldHint> Mask: 00:00:00 </span>
                </nx-formfield>
                <button
                    nxButton="primary small"
                    type="submit"
                    class="nx-margin-bottom-s"
                >
                    submit
                </button>
            </form>

            Form value: {{ unvalidatedMaskForm.value | json }}<br />
            Testform: {{ unvalidatedMaskForm.status | json }}
        </div>
    </div>
</div>
