Angular 2 table row control validation

Question

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>

Answer 1

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