How to add validation to datepicker being dynamically added to page and is not in form

[Maxwell Sands]

I have a datepicker that could have multiple instances within the same component. I want to people to display an error message when the user puts in invalid data, how would I go about doing that?

 <tr *ngFor="let detail of taskAdditionalDetails; let i = index">
          <td class="td-smaller" [ngClass]="{'non-edit-field': !detail.isCalculated && !detail.showEdit, 'disabled': detail.isCalculated}">{{detail.taskAdditionalFieldName}}</td>
          <td class="response-column td-smaller" [ngClass]="{'non-edit-field': !detail.isCalculated && !detail.showEdit, 'disabled': detail.isCalculated}">
            <ejs-textbox [(value)]="detail.response" *ngIf="detail.responseType === 'response_as_string' && detail.showEdit"></ejs-textbox>
            <ejs-datepicker [openOnFocus]='false' [showTodayButton]='false' [strictMode]="true" format="MM/dd/yyyy" floatLabelType="Auto" [(value)]="detail.responseAsDate" *ngIf="!detail.isCalculated && detail.responseType === 'response_as_dt' && detail.showEdit"></ejs-datepicker>
            <ejs-numerictextbox *ngIf="!detail.isCalculated && detail.responseType === 'response_as_integer' && detail.showEdit" value="{{detail.response}}"></ejs-numerictextbox>
            <ejs-numerictextbox *ngIf="!detail.isCalculated && detail.responseType === 'response_as_decimal' && detail.showEdit" format="c2" [(value)]="detail.responseAsDecimal"></ejs-numerictextbox>
            <ejs-numerictextbox *ngIf="!detail.isCalculated && detail.responseType === 'response_as_percent' && detail.showEdit" format="p2" value="0.5" min="0" max="1" step="0.01" [(value)]="detail.responseAsPercent"></ejs-numerictextbox>
            <ng-container *ngIf="detail.taskAdditionalFieldName === 'Flood Zone Detail' && !hasFloodInsurance">
              {{detail.response}}
            </ng-container>
            <ejs-dropdownlist *ngIf="!detail.isCalculated && detail.responseType === 'response_as_lookup_id' && detail.showEdit && !(detail.taskAdditionalFieldName === 'Flood Zone Detail' && !hasFloodInsurance)" (change)="checkForFloodInsurance(detail)" [(value)]="detail.response" [dataSource]="detail.responseOptions"></ejs-dropdownlist>
            <div *ngIf="!detail.showEdit && !detail.isCalculated && detail.responseType !== 'response_as_percent'">{{detail.response}}</div>
            <div *ngIf="!detail.showEdit && !detail.isCalculated && detail.responseType === 'response_as_percent'">{{detail.response}}</div>
            <div *ngIf="detail.isCalculated" class="disabled">
              {{detail.response}}
            </div>
          </td>
        </tr>


[Sureshkumar P]

We can add or remove the rules by using the form validator plugin.

Find the code example here:

constructor(private fb: FormBuilder) {

    this.createForm();

 

    var options: FormValidatorModel = {

      rules: {

        date: { required: true },

      },

    };

    let formObject: FormValidator = new FormValidator('#form-element', options);

    // Add email rule to user element

    formObject.addRules('date', { date: true });

  }

 

Find the sample here: https://stackblitz.com/edit/angular-hkjkvm?file=app.component.ts

[Maxwell Sands]

Hello,

this will not work. The datepicker is inside of an of ngFor, there can be multiple instances of the datepicker and there is no formgroup. date picker directly updates a value inside of an object. Please see the code below.

<mat-accordion>
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header [expandedHeight]="'30px'" [collapsedHeight]="'30px'">
        <mat-panel-title> TASK DETAIL</mat-panel-title>
      </mat-expansion-panel-header>
      <div class="edit-buttons-container">
        <button ejs-button cssClass="e-flat" iconCss="e-edit e-icons" (click)="enableEdit()" [ngClass]="{'disabled-button': showEditButtons}">Edit</button>
        <button ejs-button cssClass="e-flat" iconCss="e-disk e-icons" [ngClass]="{'disabled-button': !showEditButtons}" (click)="saveAllEdits()">Update</button>
        <button ejs-button cssClass="e-flat" iconCss="e-close e-icons" [ngClass]="{'disabled-button': !showEditButtons}" (click)="cancelEdit()">Cancel</button>
      </div>
      <table class="table table-bordered">
        <thead class="table-head">
        <tr>
          <th scope="col">Task Field</th>
          <th class="response-column" scope="col">Response</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let detail of taskAdditionalDetails; let i = index">
          <td class="td-smaller" [ngClass]="{'non-edit-field': !detail.isCalculated && !detail.showEdit, 'disabled': detail.isCalculated}">{{detail.taskAdditionalFieldName}}</td>
          <td class="response-column td-smaller" [ngClass]="{'non-edit-field': !detail.isCalculated && !detail.showEdit, 'disabled': detail.isCalculated}">
            <ejs-textbox [(value)]="detail.response" *ngIf="detail.responseType === 'response_as_string' && detail.showEdit"></ejs-textbox>
            <ejs-datepicker [openOnFocus]='false' [showTodayButton]='false' id="date-picker-{{detail.taskTypeId}}" [strictMode]="true" format="MM/dd/yyyy" floatLabelType="Auto"[(value)]="detail.responseAsDate" *ngIf="!detail.isCalculated && detail.responseType === 'response_as_dt' && detail.showEdit"></ejs-datepicker>
            <ejs-numerictextbox *ngIf="!detail.isCalculated && detail.responseType === 'response_as_integer' && detail.showEdit" value="{{detail.responseAsInteger}}"></ejs-numerictextbox>
            <ejs-numerictextbox *ngIf="!detail.isCalculated && detail.responseType === 'response_as_decimal' && detail.showEdit" format="c2" [(value)]="detail.responseAsDecimal"></ejs-numerictextbox>
            <ejs-numerictextbox *ngIf="!detail.isCalculated && detail.responseType === 'response_as_percent' && detail.showEdit" format="p2" value="0.5" min="0" max="1" step="0.01" [(value)]="detail.responseAsPercent"></ejs-numerictextbox>
            <ng-container *ngIf="detail.taskAdditionalFieldName === 'Flood Zone Detail' && !hasFloodInsurance">
              {{detail.response}}
            </ng-container>
            <ejs-dropdownlist *ngIf="!detail.isCalculated && detail.responseType === 'response_as_lookup_id' && detail.showEdit && !(detail.taskAdditionalFieldName === 'Flood Zone Detail' && !hasFloodInsurance)" (change)="checkForFloodInsurance(detail)" [(value)]="detail.response" [dataSource]="detail.responseOptions"></ejs-dropdownlist>
            <div *ngIf="!detail.showEdit && !detail.isCalculated && detail.responseType !== 'response_as_percent'">{{detail.response}}</div>
            <div *ngIf="!detail.showEdit && !detail.isCalculated && detail.responseType === 'response_as_percent'">{{detail.response}}</div>
            <div *ngIf="detail.isCalculated" class="disabled">
              {{detail.response}}
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </mat-expansion-panel>
  </mat-accordion>

[Sureshkumar P]

You can achieve your requirement by checking the date picker component aria-invalid attribute property value. This property value we have updated as true when the component has an invalid value.

Find the code example

[component.html]

 

<ejs-datepicker #date (blur)="onBlur($event)"></ejs-datepicker>

<div *ngIf="errorClass" class="e-error">Enter valid date.</div>

 

[component.ts]

@ViewChild('date')

  public dateObj: DatePickerComponent;

 

  errorClass = false;

  onBlur() {

    this.errorClass = (this.dateObj as any).inputElement.getAttribute(

      'aria-invalid'

    );

  }

 

 

In the above code example, we have checked the component aria-invalid attribute value in the blur event.