Question

我正在将AngNG DataTable与Angular一起使用，并尝试实现与此StackBlitz类似的功能。

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

HTML

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;
}

component.ts

{{1}}

Answer 1

用户点击保存按钮后，您可以检查用户输入。类似的东西：

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

请参阅您加入的StackBlitz分叉。

__

修改

1）您可以在输入旁边添加 span ：

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

相关的TS代码：

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

2）检查整行用户输入以启用或禁用保存按钮：

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

相关的HTML：

Game

请参阅StackBlitz

PrimeNG数据表验证

1 个答案: