Проверка PrimeNG Datatable

Я использую 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.info('GetControls Method: ' + <any>error, 'alert alert-danger'));
}

editRow(row) {
    console.info("row " + row.ID)
    this.iToDoList.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
    row.isEditable = true;
}  
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
3 557
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете проверить вводимые пользователем данные после того, как пользователь нажмет кнопку Сохранить. Что-то вроде :

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

См. Раздел StackBlitz от того, к которому вы присоединились.

__

Редактировать

1) Вы можете добавить такой охватывать рядом с вашим Вход:

<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

да, я знаю об этом решении, но я ищу что-то лучше, особенно когда у вас есть несколько столбцов. Представьте, что в таблице данных есть 5 входных столбцов, я бы хотел, чтобы это было мгновенно. На основе измененного вами бланкера, будет здорово, когда пользователь удалит свой ввод, рядом с полем появится сообщение о необходимости и кнопка «Сохранить» будет быть отключенным, пока они не напечатают

rgoal 24.05.2018 18:37

Хорошо, пожалуйста, проверьте мой Редактировать и скажите, все ли в порядке.

Antikhippe 24.05.2018 22:14

отличная идея, но как отключить кнопку сохранения? скажем, оба являются пустым городом и именем из бланкера .. как я могу убедиться, что кнопка сохранения отключена ... в настоящее время диапазон будет работать, но это не помешает пользователю нажать на сохранение

rgoal 24.05.2018 23:08

Я выполнил свой Редактировать

Antikhippe 25.05.2018 07:30

проблема в том, что если пользователь вводит пробел в поле ввода, проверка прекращается.

rgoal 25.05.2018 19:35

Другие вопросы по теме