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

Question

我有一个带有输入字段，日期选择器和下拉列表的表单。提交时，如果未填写所需的输入字段，则会用红线加下划线。我希望日期选择器和下拉列表也可以被强调，如果没有选择 - 目前他们什么都不做。

代码：

<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的消息，你可以使用下面的代码。

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

，并同样适用于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> 

审定工作中，必须用你form标签内的股利和使用name属性指定名称和使用该名称的不同元素的验证。

检查以下笔的UI是不是很好，但你会得到基本的想法。 http://codepen.io/next1/pen/xVOMQB