angular - PrimeNG データテーブルのバリデーション

私はAngularでPrimeNGのDataTableを使用しており、この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;
}  

回答 #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) 保存ボタンを有効または無効にするために、ユーザーが入力した行全体を確認する:

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

そして関連するHTML：

<button (click)="save(row)" [disabled]="disableSaveButton(row)">Save</button>

StackBlitzを参照してください