PrimeNG 数据表验证

Question

我将 PrimeNG DataTable 与 Angular 一起使用，并尝试实现与此类似的东西 StackBlitz。

如何在我尝试编辑的行上添加必填字段验证器？基本上，当他们编辑评论时，我需要确保他们输入了文本。

HTML

<p-table #dt  [value]="iToDoList" dataKey="ID"  [paginator]="true" [rowsPerPageOptions]="[10,50,100]" [rows]="10">
     <ng-template pTemplate="header">
         <tr>
            <th>ID</th>
            <th>Comment</th>
            <th>Action</th>
         </tr>
     </ng-template>
     <ng-template pTemplate="body" let-row>  
         <tr>
            <td>{{row.ID}}</td>
            <td>
                <div  *ngIf="!row.isEditable">{{row.Comment}}</div>
                <div *ngIf="row.isEditable">
                     <input type="text" [(ngModel)]="row.comment">
                </div>
            </td>
            <td><button (click)="editRow(row)">Edit</button></td>
            <td>                                
               <button (click)="save(row)">Save</button>
            </td>
          </tr>
     </ng-template>
</p-table>

component.ts

iToDoList: IToDoList[] = null;

ngOnInit(): void {
     this.GetToDoList(this.userID);
}

GetToDoList(ID: string) {
    this._dashboardService.getToDoList(ID)
            .subscribe(
            data => {
                this.iToDoList = data.result;
                data.map(row => {
                    row.isEditable = false;
                });    
            },
    error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
}

editRow(row) {
    console.log("row " + row.ID)
    this.iToDoList.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
    row.isEditable = true;
}

Answer 1

一旦用户点击保存按钮，您就可以检查用户输入。像 :

save(row) {
    if (row.comment === "") {
      alert('Please enter a comment');
    } else {
      row.isEditable = false
    }
  }

查看 StackBlitz 从您加入的那个分支。

__

编辑

1) 您可以在 input 旁边添加一个 span :

<input type="text" [(ngModel)]="row.name">
<span *ngIf="isEmpty(row.name)" class="error">Enter a name</span>

以及相关的TS代码：

  isEmpty(input) {
    return input.replace(/\s/g, '') === "";
  }

2) 检查整行用户输入以启用或禁用 [=35=]保存按钮：

  disableSaveButton(row) {
    if (row.name === '' || row.city === '') {
      return true;
    }
    return false;
  }

PrimeNG 数据表验证

PrimeNG Datatable validation

typescript

primeng

angular

primeng-datatable