CODEWITHSUNDEEP
angularvalidation
Emmon
Emmon

Reputation: 385

Angular: How to validate a date input based on selection of another date input

I have two input date fields i.e Invoice Date and Invoice Due Date. Using Angular how can i make the Invoice Due Date not less than the Invoice Date?

I am new to Angular, so I really don't know how to proceed.

   <div class="col-sm-2">
                <label>Invoice Date</label><br>
                <input type="date" [disabled]="true" name="invoicedate" class="form-control readOnly-date" [(ngModel)]="invoice.invoiceDate" *ngIf="!invoice.financialPeriodId">
                <input type="date" name="invoicedate" min="{{startDate | date: 'yyyy-MM-dd'}}" max="{{endDate | date: 'yyyy-MM-dd'}}" class="form-control" [(ngModel)]="invoice.invoiceDate" *ngIf="invoice.financialPeriodId">
            </div>

            <div class="col-sm-2">
                <label>Due Date</label><br>
                <input type="date" name="dueDate" class="form-control readOnly-date" [(ngModel)]="invoice.invoiceDueDate" *ngIf="!invoice.invoiceDate">
                <input type="date" name="dueDate" class="form-control" [(ngModel)]="invoice.invoiceDueDate" *ngIf="invoice.invoiceDate">
            </div>

Depending on the value for the Invoice Date, the Invoice Due Date should not be less than the Invoice Date

Upvotes: 1

Views: 692

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Try [min]="invoice.invoiceDate" like this:

<input type="date" name="dueDate" class="form-control" [(ngModel)]="invoice.invoiceDueDate" *ngIf="invoice.invoiceDate" [min]="invoice.invoiceDate">

Working Demo

Upvotes: 1

Related Questions