Angular 2表行控件验证

问题描述

我只是从userservice中填充用户，并使用* ngFor在文本框控件中将其呈现到表中.用户可以从表文本框中更改值.

I just populated users from userservice and rendered in textbox control to table using *ngFor . User can change the value from table textbox.

我想在每行用户文本框控件上进行验证.

I want to validate on each row user textbox control.

这是我的代码.

请为我的问题提供解决方案.

Please provide a solution for my problem.

界面

export interface IUser {
    userId: string;
    FirstName: string;
    status: number
}

枚举

export enum UserStatus {
    Active = 0,
    InActive = 1,
    Resigned = 2
}

组件

export class UserComponent implements OnInit {
    users: IUser[];
    userStatusArray: string[];

    ngOnInit(): void {
        this.getUsers();
        this.updateUserStatusArray();
    }

    updateUserStatusArray() {
        this.userStatusArray = new Array<string>();
        for (let item in UserStatus) {
            if (isNaN(Number(item))) {
                this.userStatusArray.push(item);
            }
        }
    }

    LoadUsers(): void {
        this.indLoading = true;
        this._userService.get(Global.BASE_GETUSER_ENDPOINT)
            .subscribe(c => { this.users = c; this.indLoading = false; },
            error => this.msg = <any>error);
    }

    getUserStatus(value: number) {
       return UserStatus[value];
    }

    setUserStatus(value: string, index: number) {
      const type = UserStatus[value];
      this.users[index].status = type;
    }

    saveUsers() {
        //Save Code
    }

}

模板

    <div id="page-wrapper" style="min-height:900px;">
        <div class="container-fluid">
            <button type="button" class="btn btn-primary" id="btnSave" (click)="saveCatalogueItems();">Save</button>

            <br/>
           <div *ngIf='users && users.length==0' class="alert alert-info" role="alert">No record found!</div>
            <div class="table-responsive" style="text-align: center;overflow:auto;width:98%;">
                <table class="table table-bordered table-hover" style="width:800px;">
                    <thead>
                        <tr>
                            <th style="width:5%;">First Name</th>
                            <th style="width:10%;">UserId</th>
                            <th style="width:10%;">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let user of users;let idx = index;">
                            <td>{{user.FirstName}}</td>
                            <td> <input class="form-control" type="text" [(ngModel)]="user.userId" /></td>
                            <td> <input class="form-control" type="hidden" [(ngModel)]="user.status" />
                                 <select class="form-control" (change)="setUserStatus($event.target.value , idx);">
                                        <option *ngFor="let item of userStatusArray" [selected]="item == getUserStatus(user.status)">{{ item }} </option>
                                 </select>
                            </td>
                        </tr>
                    </tbody>

                </table>
            </div>
        </div>
    </div>

推荐答案

您需要将整个表格标签包装在form标签内才能执行如下验证:

You need to wrap entire table tag inside form tag to perform validations like below:

<form>
<table>
<thead>
    <tr>
        <th style="width:5%;">User</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let user of users;let i=index">
      <td>
        <input class="form-control" #Name="ngModel" type="text" [(ngModel)]="user.Name" name="Name-{{i}}" [pattern]="validNamePattern"/>
      <div class="text-danger" *ngIf="(Name.errors != null && Name.errors?.pattern)">Please enter valid name.
      </div>
      </td>
    </tr>

</tbody>

 <button id="btnSave" (click)="saveUsers();">Save</button>
</table>
</form>

在组件端:

validNamePattern="^[a-zA-Z0-9]*$"

希望有帮助！

这篇关于Angular 2表行控件验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！