角材料md-datepicker和md-select驗證

Question

我有一個帶有輸入字段，日期選擇器和下拉列表的表單。 提交時，如果未填寫必填項，則用紅線突出顯示。 我希望datepickers和下拉列表也能被強調（如果未選中的話）-目前它們什么也不做。

碼：

  <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

由於Datepicker支持ng-messages，因此您可以使用以下代碼。

<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>

選擇也是如此

<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>

為了使驗證生效，您必須將div包裹在form標記中，並使用name屬性分配名稱，並將該名稱用於不同元素的驗證。

檢查以下手寫筆UI不好，但是您會得到基本的想法。 http://codepen.io/next1/pen/xVOMQB