PrimeNG p-Calendar & AutoComplete Values and Validation

Question

I am using primeNG p-Calendar Control and AutoComplete. Here is my Code (blunker) (click on edit then save") I have two issues:

I can't get the newly selected Date for whatever reason..no matter what I do I always get the old date.
I need to be able to check if both auto-complete or calendar are empty. if anyone is empty "save" button should be disabled and the span (required) should appear next to the empty field

HTML

<p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]" [rows]="10">

    <ng-template pTemplate="header">
        <tr>
            <th width="5%">eRSA ID</th>
            <th width="15%">Access For</th>
            <th width="17%">Followup DT</th>
            <th width="33%">Comment</th>
            <th width="20%">BSA Name</th>
<th width="10%">Action</th>         

        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row>
        <tr>
            <td>{{row.ersaID}}</td>
            <td>{{row.accessFor}}</td>


            <td>

                <div>
                    <p-calendar name="followupDate" [(ngModel)]="row.followupDate" [dataType]="date" [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
          <span  style="color:crimson; font-size:8pt">Required</span>
                </div>
            </td>
            <td>
                <div>{{row.comment}}</div>

            </td>


            <td>
                                                    <div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
                                             <div *ngIf="row.isBSAEditable">
                    <p-autoComplete name="bsaNameList" [(ngModel)]="bsaListVal" [suggestions]="iBsaList" (completeMethod)="searchBsaList($event)"
                     [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
           <span  style="color:crimson; font-size:8pt">Required</span>
                    </div>

            </td>
            <td>
        <button  (click)="onSelectedFollowupdRow(row)">Edit</button>
<button (click)="editRow(row)" >Save</button>

        </tr>
    </ng-template>

</p-table>

Component

bsaListVal: IBsaList;
  iBsaList: IBsaList[];
  originalBsaList: IBsaList[];
  iBsaFollowup: any[];

  ngOnInit(): void {
    this.getBSAFollowup();
    this.GetBsaList();
  }
  searchBsaList(event) {
    this.iBsaList = this.originalBsaList;
    this.iBsaList = this.iBsaList
      .filter(data => data.name.toString()
        .toLowerCase()
        .indexOf(event.query.toString().toLowerCase()) !== -1);

  }

  GetBsaList() {
    var data = {"result":[{"id":"1","name":"Mike S"},{"id":"2","name":"John B"},{"id":"3","name":"Adam P"},{"id":"4","name":"Sam J"},{"id":"5","name":"Carolyn G"},{"id":"6","name":"Steve C"}]};
    this.iBsaList = data.result;
    this.originalBsaList = data.result;
  }

  getBSAFollowup() {
    var data = { "result":[{"id":"x","ersaID":"XXX","bsaID":"5","followupDate":"10/20/2017","active":true,"comment":"test this rsss 2","accessFor":"XXXX","bsaName":"Carolyn G"},{"id":"X","ersaID":"XXXX","bsaID":"1","followupDate":"10/27/2017","active":true,"comment":"test this rsss 4","accessFor":"XXXXX","bsaName":"Mike S"}]};

    this.iBsaFollowup = data.result;
    this.iBsaFollowup.map(row => {
      row.isBSAEditable = false;
    });
  }
onSelectedFollowupdRow(row) {
      //  console.log('one row select ');

        this.iBsaFollowup.filter(row => row.isBSAEditable).map(r => { r.isBSAEditable = false; return r })
        row.isBSAEditable = true;
        this.bsaListVal = {
            id: row.id,
            name: row.bsaName
        };

    }
      editRow(row) {

     console.log(' BSAid:' + this.bsaListVal.id);
         console.log('BSA name:' + this.bsaListVal.name);
         console.log('date  :' + row.followupDate);

        // with this you set all the rows as no editable, so you can change from row to row with the edit button
       //print selected bsa ID (auto complete ID)
     }
}

export interface IBsaList {
  id: string,
  name: string
}

********************************************************UPDATE*************************************************** now i get the new date (but i need it to be formatted //mm/dd/yyy) here is also the updated code (blunker) HTML

<p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]" [rows]="10">

    <ng-template pTemplate="header">
        <tr>
            <th width="5%">eRSA ID</th>
            <th width="15%">Access For</th>
            <th width="17%">Followup DT</th>
            <th width="33%">Comment</th>
            <th width="20%">BSA Name</th>
<th width="10%">Action</th>         

        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row>
        <tr>
            <td>{{row.ersaID}}</td>
            <td>{{row.accessFor}}</td>


            <td>

                <div>
                    <p-calendar name="followupDate" [(ngModel)]="newfollowupDate"  [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
          <span  style="color:crimson; font-size:8pt">Required</span>
                </div>
            </td>
            <td>
                <div>{{row.comment}}</div>

            </td>


            <td>
                                                    <div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
                                             <div *ngIf="row.isBSAEditable">
                    <p-autoComplete name="bsaNameList" [(ngModel)]="bsaListVal" [suggestions]="iBsaList" (completeMethod)="searchBsaList($event)"
                     [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
           <span  style="color:crimson; font-size:8pt">Required</span>
                    </div>

            </td>
            <td>
        <button  (click)="onSelectedFollowupdRow(row)"  >Edit</button>
<button (click)="editRow(row)" [disabled]="isValid(row)">Save</button>

        </tr>
    </ng-template>

</p-table>

Component

 bsaListVal: IBsaList;
  iBsaList: IBsaList[];
  originalBsaList: IBsaList[];
  iBsaFollowup: any[];
  newfollowupDate:Date;

  ngOnInit(): void {
    this.getBSAFollowup();
    this.GetBsaList();
  }
  searchBsaList(event) {
    this.iBsaList = this.originalBsaList;
    this.iBsaList = this.iBsaList
      .filter(data => data.name.toString()
        .toLowerCase()
        .indexOf(event.query.toString().toLowerCase()) !== -1);

  }

  GetBsaList() {
    var data = {"result":[{"id":"1","name":"Mike S"},{"id":"2","name":"John B"},{"id":"3","name":"Adam P"},{"id":"4","name":"Sam J"},{"id":"5","name":"Carolyn G"},{"id":"6","name":"Steve C"}]};
    this.iBsaList = data.result;
    this.originalBsaList = data.result;
  }

  getBSAFollowup() {
    var data = { "result":[{"id":"x","ersaID":"XXX","bsaID":"5","followupDate":"10/20/2017","active":true,"comment":"test this rsss 2","accessFor":"XXXX","bsaName":"Carolyn G"},{"id":"X","ersaID":"XXXX","bsaID":"1","followupDate":"10/27/2017","active":true,"comment":"test this rsss 4","accessFor":"XXXXX","bsaName":"Mike S"}]};

    this.iBsaFollowup = data.result;
    this.iBsaFollowup.map(row => {
      row.isBSAEditable = false;
    });
  }

  isValid(row) {
   if (this.newfollowupDate && this.bsaListVal) {
     return false;
   }
   return true;
 }
onSelectedFollowupdRow(row) {
      //  console.log('one row select ');

        this.iBsaFollowup.filter(row => row.isBSAEditable).map(r => { r.isBSAEditable = false; return r })
        row.isBSAEditable = true;
        this.newfollowupDate=row.followupDate;
        this.bsaListVal = {
            id: row.id,
            name: row.bsaName
        };

    }
      editRow(row) {

     console.log(' BSAid:' + this.bsaListVal.id);
         console.log('BSA name:' + this.bsaListVal.name);
         console.log('date  :' + this.newfollowupDate);

        // with this you set all the rows as no editable, so you can change from row to row with the edit button
       //print selected bsa ID (auto complete ID)
     }
}

export interface IBsaList {
  id: string,
  name: string
}

score 1 · Accepted Answer · answered Jun 22 '18 at 14:27

1

For the pCalendar, remove [dataType]="date" then it will send the correct date when you hit save. Think this is due to your model property followupDate is not a Date type.

For validation is pretty much how you would do any other validations, for simplicity sake (not 100% working, affects other rows, but you get the idea):

isValid(row) {
   if (row.followupDate && this.bsaListVal) {
     return false;
   }
   return true;
 }

<button (click)="editRow(row)" [disabled]="isValid(row)">Save</button>

Hope that helps.

answered Jun 22 '18 at 14:27

penleychan

5,370
1
17
28

update my code above and the bluner (https://stackblitz.com/edit/angular-hgrz62?file=app%2Fapp.component.html) ..Dae is working but I am getting (Tue Oct 31 2017 00:00:00 GMT-0700 (Pacific Daylight Time) i need to get the date only! how do I do that? – rgoal Jun 22 '18 at 15:08
Not sure if I follow, that is a valid date. – penleychan Jun 22 '18 at 15:12
1

Use Angular Pipes for formattedDate in the template. `Import DatePipe from '@angular/common'` and use `{{ yourDate | 'shortDate' }}`. ShortDate - 'M/d/yy' ; Medium Date - 'MMM d, y' – user3344978 Jun 22 '18 at 15:17
Ah okay I see what he meant. Alternatively you can just do this: `this.newfollowupDate.toLocaleDateString()` – penleychan Jun 22 '18 at 15:19
perfect both solutions worked...just needed the short date – rgoal Jun 22 '18 at 16:13
just to let everyone know...row.followdate date did not work..had to create a date field then bind that to the control...not sure this is the best way but ths is the only thing worked fr me...it will be easier and more efficient if you can just do row.followupdate – rgoal Jun 22 '18 at 16:15

PrimeNG p-Calendar & AutoComplete Values and Validation

1 Answers1