Я использую 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;
}





Вы можете проверить вводимые пользователем данные после того, как пользователь нажмет кнопку Сохранить. Что-то вроде :
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 входных столбцов, я бы хотел, чтобы это было мгновенно. На основе измененного вами бланкера, будет здорово, когда пользователь удалит свой ввод, рядом с полем появится сообщение о необходимости и кнопка «Сохранить» будет быть отключенным, пока они не напечатают