Angular 2 表格行控件验证 [英] Angular 2 table row control validation

问题描述

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

我想对每一行用户文本框控件进行验证.

这是我的代码..

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

界面

导出接口 IUser {用户 ID:字符串；名字:字符串；状态:编号}

枚举

export enum UserStatus {活跃 = 0,非活动 = 1,辞职 = 2}

组件

导出类 UserComponent 实现 OnInit {用户:IUser[];用户状态数组:字符串[]；ngOnInit(): 无效 {this.getUsers();this.updateUserStatusArray();}更新用户状态数组(){this.userStatusArray = new Array();for(让用户状态中的项目){如果 (isNaN(Number(item))) {this.userStatusArray.push(item);}}}加载用户():无效{this.indLoading = true;this._userService.get(Global.BASE_GETUSER_ENDPOINT).subscribe(c => { this.users = c; this.indLoading = false; },错误 =>this.msg = <any>error);}getUserStatus(值:数字){返回用户状态[值]；}setUserStatus(值:字符串，索引:数字){const type = UserStatus[value];this.users[index].status = 类型；}保存用户(){//保存代码}}

模板

 
<div class="container-fluid"><button type="button" class="btn btn-primary" id="btnSave" (click)="saveCatalogueItems();">保存</button><br/><div *ngIf='users &&users.length==0' class="alert alert-info" role="alert">未找到记录！</div><div class="table-responsive" style="text-align: center;overflow:auto;width:98%;"><table class="table table-bordered table-hover" style="width:800px;"><头><tr><th style="width:5%;">名字</th><th style="width:10%;">UserId</th><th style="width:10%;">状态</th></tr></thead><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></选择></td></tr></tbody>

解决方案

您需要将整个 table 标记包装在 form 标记中才能执行如下验证:

<表格><头><tr><th style="width:5%;">User</tr></thead><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)">请输入有效名称.

</td></tr></tbody><button id="btnSave" (click)="saveUsers();">保存</button></表单>

在组件端:

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

希望能帮到你！！

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.

Here is my code..

Please provide a solution for my problem.

Interface

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

Enum

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

Component

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
    }

}

Template

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

解决方案

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>

At component side:

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

Hope it helps!!

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