<form>
    <nx-natural-language-form [formGroup]="naturalForm">
        <span>I want to be</span>
        <nx-word size="long" label="Always a label">
            <nx-dropdown formControlName="who">
                <nx-dropdown-item value="student">a Student</nx-dropdown-item>
                <nx-dropdown-item value="philosopher"
                    >a Philosopher</nx-dropdown-item
                >
                <nx-dropdown-item value="sailor">a Sailor</nx-dropdown-item>
            </nx-dropdown>
            <div nxError>We need to know about the type of role you want.</div>
        </nx-word>

        <span>and visit the city of</span>

        <nx-word size="short" label="Always a label">
            <input nxInput formControlName="city" />
            <div nxError>This field is required.</div>
        </nx-word>
        <span>and see</span>
        <nx-word size="regular" label="Always a label">
            <input nxInput formControlName="spots" />
            @if (naturalForm.controls.spots.hasError('required')) {
            <div nxError>This field is required.</div>
            } @if (naturalForm.controls.spots.hasError('pattern')) {
            <div nxError>Only numbers are allowed.</div>
            }
        </nx-word>
        <span> nice spots.</span>
    </nx-natural-language-form>

    <button nxButton (click)="validate()" type="submit">submit</button>
</form>

<p>
    Form value: {{ naturalForm.value | json }}<br />
    Form status: {{ naturalForm.status | json }}
</p>
