Angular 2 表格行控件验证 [英] Angular 2 table row control validation
本文介绍了Angular 2 表格行控件验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我刚刚从 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 标记中才能执行如下验证: