CODEWITHSUNDEEP
angularjsvalidationangular-material
Daniel Bogart
Daniel Bogart

Reputation: 1295

Angular Material md-select validation issue

I have several md-select dropdowns on my form, many of which have validation. The validation works correctly on all the dropdowns except for the following, which doesn't prevent the form from submitting if empty:

    <md-input-container class="form-input-container"
                        flex="15">
      <label>NDRA*</label>
      <md-select id="registration-information-ndra"
                 name="ndra"
                 ng-model="vm.registration.code"
                 ng-class="{'validation-error': newForm.ndra.$error.required && newForm.$submitted}"
                 ng-required="vm.validation.ndra">
        <md-option ng-repeat="code in vm.dropdowns.codes"
                   value="{{code}}">
          {{code}}
        </md-option>
      </md-select>
    </md-input-container>

vm.validation.ndra evaluates to true, so I know that's not the issue. If I look at the values for newForm.ndra vs a working select option, such as newForm.submissionDate, I get the following:

newForm.ndra: {"$viewValue":"p","$modelValue":"p","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":true,"$invalid":false,"$error":{},"$name":"ndra","$options":null}

Registration Type (validation works):

 <md-input-container class="form-input-container padded-input md-block"
                            flex-gt-sm="">
          <label>Type of Registration*</label>
          <md-select id="registration-information-type"
                     name="registrationType"
                     ng-model="vm.registration.type"
                     ng-class="{'validation-error': newForm.registrationType.$error.required && newForm.$submitted}"
                     ng-required="vm.validation.registrationType">
            <md-option ng-repeat="type in vm.dropdowns.types"
                       value="{{type}}">
              {{type}}
            </md-option>
          </md-select>
        </md-input-container>

{"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"required":true},"$name":"registrationType","$options":null}

Upvotes: 2

Views: 3228

Answers (3)

Daniel Bogart
Daniel Bogart

Reputation: 1295

Figured it out. Deep in my controller code, the controller was being instantiated, and then this.registration.code was being set to P, so the model for the ndra dropdown already had a value.

Upvotes: 2

nextt1
nextt1

Reputation: 3988

Just change the value to false in ng-required and see the result below in the following link. I think vm.validation.ndra returns false. http://codepen.io/next1/pen/WwoyWG

Upvotes: 0

Malachi
Malachi

Reputation: 3221

I am thinking that your vm.validation.ndra is returning opposite what your vm.validation.registrationType is returning. so that the select is not required.

if you look at what was returned...

NDRA

"$valid":true,"$invalid":false

vs.

Registration Type

"$valid":false,"$invalid":true

they are completely opposite.

you should check to make sure that you are getting the right truthy in vm.validation.ndra

Upvotes: 1

Related Questions