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

Question

我正在做一个 Angular 2 项目，我在其中使用 Primeng 日历。

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

我已经检查了 NgForm、NgModel、PrimeNg 日历文档并且我对 Google 做了一些研究，但我没有发现我做错了什么。当然，我已经检查了 Chrome 中的代码，所有内容都具有正确的属性。

HTML代码

<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 日历之前保持按钮禁用

How to keep the button disabled until PrimeNg calendar is not filled

primeng

angular

angular-forms