<div class="form-group">
    <label for="Name">{{"FirstName" | localize}} *</label>
    <input id="Name" #nameInput="ngModel" class="form-control" type="text" name="Name" [(ngModel)]="fName" required maxlength="32">
    <validation-messages [formCtrl]="nameInput"></validation-messages>
</div>
<div class="form-group">
    <label for="Surname">{{"LastName" | localize}} *</label>
    <input id="Surname" #surnameInput="ngModel" type="text" name="Surname" class="form-control" [(ngModel)]="sName" required maxlength="32">
    <validation-messages [formCtrl]="surnameInput"></validation-messages>
</div>        
<div class="row">
    <div class="col-xl-6">
        <div class="form-group">
            <label for="PhoneNumber">{{"PhoneNumber" | localize}}</label>
            <input id="PhoneNumber" type="text" name="PhoneNumber" class="form-control" [(ngModel)]="pNumber" maxlength="24">
        </div>
    </div>
    <div class="col-xl-6">
        <div class="form-group">
            <label for="EmailAddress">{{"EmailAddress" | localize}} *</label>
            <input id="EmailAddress" #emailAddressInput="ngModel" type="email" name="EmailAddress" class="form-control" [(ngModel)]="emailAddress" required maxlength="256" email />
            <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
        </div>
    </div>
</div>