PrimeNG p日历和自动完成值和验证

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
}

Answer 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.