<form>
    <div class="col-lg-6 col-lg-offset-1 text-center bordered">
        <div class="row">
            <div class="col-xs-6 col-sm-3">
                    <label>User Id:</label>
                <input type="text" class="form-control" name="username" [(ngModel)]="user.userId">
                </div>
            </div>

        <div class="col-xs-6 col-sm-3">
            <label>Rank:</label>
            <select>
                <option *ngFor="let rank of ranks" value="{{rank.title}}"> {{rank.title}}---{{rank.paygrade}}</option>
            </select>
        </div>

        <div class="col-xs-6 col-sm-3">
            <label>Office ID:</label>
            <select>
                <option *ngFor="let office of offices" value="{{office.title}}"> {{office.title}}</option>
            </select>
        </div>

        <div class="col-xs-6 col-sm-3">
            <label>Lock Code:</label>
            <input type="text" class="form-control" name="lockcode" [(ngModel)]="user.lockCode">
        </div>
    </div>
</form>