Validation of select element on the page

Ionic Framework ionic-v3
1

I am trying to use the form group validators to validate a select control, but it does not seem to be validating correctly. If I select it and pick a value, and dump the control out to the console, it still shows the select as invalid. The select appears to have data, but it always says invalid and the dataForm never becomes valid.

Any thoughts???

In my constructor, I have this for the validator:

this.dataForm = form.group({ state: ["", Validators.compose([Validators.required])] });

In my page, I have the following:

<form [ngFormModel]="dataForm" (submit)="save()">
        <!--  Instructions -->
        <h3>Create a new account</h3>
        <div class="p10p">
            Please enter your information in the fields below.
        </div>

        <!--  Buttons -->
        <div padding>
            <div class="rfloat w50"><button block outline type="submit" [disabled]="!dataForm.valid">Save</button></div>
            <br class="bclear"/>
        </div>

        <!--  Header -->
        <h3>Create Account</h3>

        <!--  Inputs -->
        <ion-list>
            <!--  State -->
            <ion-item>
                <label class="lfloat mt4p">State</label>
                <select ngControl="state" class="site-control rfloat w65">
                    <option [value] = ""></option>
                    <option *ngFor="#key of stateData" [value] = "key.id">{{ key.name + '[' + key.abbreviation + ']' }}</option>
                </select>
                <br class="bclear"/>
                <div control="state" class="validation-error"></div>
            </ion-item>
        </ion-list>
    </form>
1 Like