Question

我正在使用primeNG p-Calendar Control和AutoComplete。这是my 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)]="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>

组件

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
}

*************************************************** *********更新******************************************** *********** 现在我得到了新的日期（但我需要将其格式化// mm / dd / yyy）这也是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>

组件

 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

对于pCalendar，删除[dataType]="date"，然后在您点击保存时它将发送正确的日期。认为这是由于您的模型属性followupDate不是Date类型造成的。

为了验证，您几乎可以进行任何其他验证（为了简单起见（并非100％正常工作，会影响其他行，但您知道了））

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

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

希望有帮助。

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

1 个答案: