Polymer1.0 驗證兩個輸入[type=date]

Question

我開始使用 Polymer，但很多問題都找不到答案。

我有兩個輸入

<paper-input id="startDate" type="date" 
    error-message="The end date is before the start date"></paper-input>
<paper-input id="endDate" type="date"></paper-input>

當兩者都為空或僅填寫一項時，該表格有效。 如果兩者都填寫，則需要驗證endDate大於或等於startDate 。 怎么做？

Answer 1

如果您剛開始，請閱讀開發人員指南，您可以在其中找到大多數問題的答案。

在您的情況下，您需要使用紙張輸入的值聲明屬性並觀察其更改。 https://www.polymer-project.org/1.0/docs/devguide/properties.html#change-callbacks 。 在該觀察者中，您可以編寫邏輯並將任何（或兩者）字段設置為無效。

<dom-module id="my-form">
<template>
<paper-input id="startDate" type="date" value="{{startDate}}" error-message="The end date is before the start date"></paper-input>
<paper-input id="endDate" type="date" value="{{endDate}}"></paper-input>
</template>
<script>
(function() {
'use strict';

Polymer({
  is: 'my-form',

  properties: {
    startDate: Date,
    endDate: Date,
  },
  observers: ['_dateChange(startDate, endDate)'],
  _dateChange: function(startDate, endDate) {
     if(/*logic goes here*/) {
       this.$.startDate.invalid = true;
     } else {
       this.$.startDate.invalid = false;
     }
  }      
});
})();
</script>
</dom-module>