Question

我正在开展Angular 2项目，并且我正在使用Primeng日历。

所以我的问题：我想在我的组件上禁用保存按钮，直到日历和选择字段都没有填充。使用简单的HTML选择它是有效的，所以在我没有在其中键入任何内容之前，保存按钮被禁用，但在日历上它不能正常工作。保存按钮和日历位于同一组件上。 Calendar有一个自己的组件通过@Input工作，因为它在许多地方使用，这就是它在包装器中的原因。

我已经检查了NgForm，NgModel，PrimeNg日历文档，我在谷歌上做了一些研究，但是我没有找到任何我做错的事情。当然，我已经检查过Chrome中的代码，并且所有内容都具有正确的属性。

HTML code

<form #x="ngForm" novalidate>

  <select class="form-control" id="Id" name="Id" [(ngModel)]="_displayedFormData.Id" #Id="ngModel" [disabled]="!_isRowEditing" required>
    <option [value]=null selected>Choose one!</option>
    <option *ngFor="let acr of _accreditation" [ngValue]="acr.id">{{acr.name}}</option>
  </select>

  <calendar-wrapper id="validationStart" name="validationStart" cId="validationStart" cName="validationStart" [(cDate)]="_displayedFormData.validationStartChoose" [isDisabled]="!_isRowEditing" [isRequired]='true'>
  </calendar-wrapper>

</form>   
<button type="button" class="btn btn-success" (click)="saveData()" [disabled]="!x.valid">Save Me!</button>

日历包装器HTML

<p-calendar *ngIf="isRequired" name="inside-{{cName}}" class="ui-g-nopad" [(ngModel)]="cDate" (ngModelChange)="update($event)" #{{cId}}="ngModel" [showButtonBar]="true" [showIcon]="true" dateFormat="yy.mm.dd." [locale]="hu" [monthNavigator]="true" [yearNavigator]="true"
  yearRange="1900:2200" [disabled]="isDisabled" required="true">
</p-calendar>

Answer 1

您可以检查日历输入组件的ngModel

 <p-calendar [(ngModel)]="value" ></p-calendar>
 <button [disabled]="!value">ClickMe </button>

LIVE DEMO

如何在PrimeNg日历未填满之前保持按钮被禁用

1 个答案: