Angular 2錶行控制驗證

Question

我剛從usersservice填充用戶，並使用* ngFor在textbox控件中呈現給表。用戶可以更改表格文本框中的值。

我想驗證每行用戶文本框控件。

這裏是我的代碼..

請爲我的問題的解決方案。

接口

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> 

Answer 1

你需要用表單標籤內整個表標籤像下面執行驗證：

<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]*$" 

希望它可以幫助！