angular - PrimeNG p-Calendar & AutoComplete 值和验证
问题描述
我正在使用 primeNG p-Calendar Control 和 AutoComplete。这是我的代码(笨拙)(单击编辑然后保存“)我有两个问题:
- 无论出于何种原因,我都无法获得新选择的日期。无论我做什么,我总是会得到旧日期。
- 我需要能够检查自动完成或日历是否为空。如果有人为空,则应禁用“保存”按钮,并且跨度(必需)应出现在空白字段旁边
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)这里也是更新的代码(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
}
解决方案
对于 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>
希望有帮助。
推荐阅读
- html - 如何在不重新编译的情况下更改 Vue 模板?
- java - 如何等待主线程直到 AWS S3 文件上传完成
- node.js - SVG作为SVG的图像标签在使用sharp时不起作用
- r - 在R中对矩阵的行进行排序
- actions-on-google - 应用操作测试工具 v3.0.0:找不到带有操作文件参考的 Android 模块
- java - 单击另一个按钮后如何启用/禁用按钮?
- python - 向量化 numpy 多维数组。操作数组明智而不是元素明智
- c# - 使用在云中使用水平扩展的选项来实施 dotnet core web api 的最佳实践
- mysql - 选择表格中的最低日期
- python - 条件循环的问题