CODEWITHSUNDEEP
angularprimengangular-forms
ArashD
ArashD

Reputation: 57

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

I'am working on a Angular 2 project and I'm using Primeng calendar in it.

So my issue: I want to disable a save button on my component, until both of the calendar and the select field is not filled. With the simple HTML select it works, so until I'm not typing anything in it, the save button is disabled, but on the calendar it doesn't work properly. The save button and the calendar are on the same component. Calendar has an own component working via @Input because is it being used at many places, that's why it is in a wrapper.

I've checked NgForm, NgModel, PrimeNg calendar documentaion and I did some reserch on Google, but I've not found anything what I'am doing wrong. Of course I've inspected the code in Chrome and everything has got the right attributes.

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>

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

Upvotes: 3

Views: 4538

Answers (1)

Aravind
Aravind

Reputation: 41571

You can check for the ngModel of the calendar input componenet

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

LIVE DEMO

Upvotes: 3

Related Questions