角材料md-datepicker和md-select验证

Question

I have a form with input fields, datepickers, and dropdowns. On submit, if the required input fields are not filled out, they are underscored with a red line. I would like the datepickers and dropdowns to also be underscored if not selected - at the moment they do nothing.

Code:

  <div class="input-section-title">Information</div>

  <div layout="row"
       layout-align="start start">

    <md-datepicker id="date"
                   ng-model="vm.submissionDate"
                   md-placeholder="Date*"
                   required></md-datepicker>

    <md-input-container class="form-input-container padded-input md-block"
                        flex-gt-sm="">
      <label>Type*</label>
      <md-select id="information-type"
                 ng-model="vm.type"
                 required>
        <md-option ng-repeat="type in vm.dropdowns.types"
                   value="{{type}}">
          {{type}}
        </md-option>
      </md-select>
    </md-input-container>

    <md-input-container class="form-input-container"
                        flex="15">
      <label>NVRA*</label>
      <md-select id="information-nlba"
                 ng-model="vm.code"
                 required>
        <md-option ng-repeat="code in vm.dropdowns.codes"
                   value="{{code}}">
          {{code}}
        </md-option>
      </md-select>
    </md-input-container>

  </div>

  <div class="input-section-title">Personal Information</div>

  <div layout="row" layout-align="start start">

    <md-input-container class="form-input-container" flex>
      <label>Last Name*</label>
      <input id="personal-information-last-name"
             ng-model="vm.vitals.last" required>
    </md-input-container>

    <md-input-container class="form-input-container padded-input" flex>
      <label>First Name*</label>
      <input id="personal-information-first-name"
             ng-model="vm.vitals.first" required>
    </md-input-container>

    <md-input-container class="form-input-container padded-input" flex>
      <label>Middle Name</label>
      <input id="personal-information-middle-name"
             ng-model="vm.vitals.middle">
    </md-input-container>

    <md-input-container class="form-input-container" flex="15">
      <label>Suffix</label>
      <md-select id="personal-information-suffix"
                 ng-model="vm.vitals.suffix">
        <md-option ng-repeat="suffix in vm.dropdowns.suffixes"
                   value="{{suffix}}">
          {{suffix}}
        </md-option>
      </md-select>
    </md-input-container>

  </div>

Answer 1

As Datepicker supports ng-messages you can use the following code.

<md-datepicker id="date"
               name='date'
               ng-model="vm.submissionDate"
               md-placeholder="Date*"
               required>
</md-datepicker>
<div class="errors" ng-messages="newForm.date.$error">
    <div ng-message="required">Required</div>
</div>

and same goes for select

<md-input-container class="form-input-container padded-input md-block"
                    flex-gt-sm="">
  <label>Type*</label>
  <md-select id="information-type"
             name="type"
             ng-model="vm.type"
             required>
    <md-option ng-repeat="type in vm.dropdowns.types"
               value="{{type}}">
      {{type}}
    </md-option>
  </md-select>
   <div class="errors" ng-messages="newForm.type.$error">
    <div ng-message="required">Required</div>
</div>
</md-input-container>

For Validation to work you must wrap you div within form tag and assign name using name attribute and use that name for validation of different elements.

check the following pen UI is not good but you will get the basic idea. http://codepen.io/next1/pen/xVOMQB