Question

我有一个Angular指令，其中包含一个带有datepicker的表单。我正在尝试创建一个函数来保持按钮单击从表单上调用提交。我无法确定在哪里找到.opened属性。当我用ng-click执行打开时，一切正常。以下是示例代码。

HTML：

<form ng-submit="editAlert.$valid && vm.handleSubmit()" name="editAlert" id="editAlert" class="buffer-bottom" novalidate>
    <div class="form-group">
    <label class="control-label" for="effectiveDate">Effective Date</label>
    <div class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="MM-dd-yyyy" is-open="dpEffectiveDate.opened" ng-model="alertMsg.effectiveDateFmt" name="effectiveDate" id="effectiveDate">
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="vm.openDateHandler($event)"><i class="fa fa-calendar"></i></button>
      </span>
    </div>
    <p class="help-block" ng-show="editAlert.effectiveDate.$error.endBeforeStart">Effective date must be before expire date.</p>
  </div>
</form>

我也尝试将dpEffectiveDate传递给openDateHandler函数。

下面是我的Typescript函数

openDateHandler = ($event) => {
  $event.preventDefault();
  //dpDate.opened = !dpDate.opened;
}

如何访问.opened属性？

Answer 1

如果您要做的只是阻止提交行为，只需在按钮元素中添加'type =“按钮”。

 <button type="button" class="btn btn-default" ng-click="vm.openDateHandler($event)">

默认情况下，表单内的按钮将作为提交按钮，除非它被赋予不同的类型。

您不需要弄乱日期选择器的已打开状态以阻止表单提交。

Angular指令开放日期选择器

1 个答案: