<div class="form-group" [class.has-error]="productId.invalid && productId.touched">
            <label class="control-label">User Name </label>
            <input #UserName="ngModel" required type="text" class="form-control" name="UserName" maxlength="10"
                [(ngModel)]="user.UserName" >
            <div *ngIf="UserName.invalid && UserName.touched" class="alert alert-danger">
                UserName is required.
            </div>
        </div>

        <div class="form-group">
            <label>Password</label>
            <input #Password="ngModel" type="password" required class="form-control" name="Password"
                [(ngModel)]="user.Password">
            <div *ngIf="Password.invalid && Password.touched" class="alert alert-danger">
                Password is required.
            </div>
        </div>