Why aren't input fields showing in format (xxx) xxx-xxxx? - html

Question

I am trying to create an html view that shows three form fields that together collect a United States format phone number in the format (xxx) xxx-xxxx .
How can I write the css to make this happen in an app that uses css3, bootstrap, and html5 along with AngularJS?
My current attempt gets the three input field sizes correctly, but completely messes up the placement of the parens ( and ) and also messes up the placement of the dash -. The parens and dashes are placed almost all over the screen, in that they are almost in different rows, with little or no correlation to the placement of the input fields. What specific changes need to be made to the code below in order to print out the input fields in the format (xxx) xxx-xxx, given css3, html5, bootstrap, and AngularJS?
<div class="row">
<div class="col-sm-1">
(<input class="form-control" type="text" id="phonenum1" name="phonenum1" maxlength="3" size="3" ng-model="auth.resultphone.phonenum1" ng-pattern="auth.onlyNumbers" required />)
</div>
<div class="col-sm-1">
<input class="form-control" type="text" id="phonenum2" name="phonenum2" maxlength="3" size="3" ng-model="auth.resultphone.phonenum2" ng-pattern="auth.onlyNumbers" required />-
</div>
<div class="col-sm-1">
<input class="form-control" type="text" id="phonenum3" name="phonenum3" maxlength="4" size="4" ng-model="auth.resultphone.phonenum3" ng-pattern="auth.onlyNumbers" required />
</div>
</div>
Here is a print screen of what the above code is currently printing in the view:
By contrast, the correct output would put all three fields on the same line within the proper punctuation in the pattern (phonenum1) phonenum2-phonenum3
ONGOING EFFORTS:
Also, if I take #Pauli_D's advice and deviate from the OP by using the RegEx \d{3}[\-]\d{3}[\-]\d{4}, the AngularJS form validation is only partially effective. For example, typing ANYTHING into the phonenum1 input in the code below results in the view displaying the Please enter a phone number in the format 111-222-3333 warning, but the warning DOES NOT GO AWAY when you type in a number in the format 111-222-3333. Here is the code in the view for trying #Paulie_D's suggestion:
<form name="confirmForm" ng-submit="auth.confForm(confirmForm.$valid)" novalidate>
<div class="form-group">
<div class="row">
<label for="auth.resultphone.phonenum1">Cell Phone number:</label>
</div>
<div class="row">
<div class="col-sm-3">
<input class="form-control" type="text" id="phonenum1" name="phonenum1" maxlength="12" size="12" ng-model="auth.resultphone.phonenum1" ng-pattern="auth.usPhone" required />
</div>
</div>
<div class="row">
<p ng-show="confirmForm.phonenum1.$error.required && !confirmForm.phonenum1.$pristine" class="help-block">Area code of cell phone number is required.</p>
<p ng-show="!confirmForm.phonenum1.$valid && !confirmForm.phonenum1.$pristine" class="help-block">Phone number must be in the format 111-222-3333.</p>
<button type="submit" class="btn btn-primary" ng-disabled="confirmForm.$invalid" >Submit</button>
</div>
</div>
</form>
And here is the variable declaration in the service auth.js:
this.usPhone = "\d{3}[\-]\d{3}[\-]\d{4}";
The revised AngularJS code with #PaulieD gives the following print screen. Note that the Submit button is still shaded, so that the form cannot yet be submitted:
So what other changes need to be made?

Answer 1

As for the css alignment issue...
.col-sm-1 {
padding-right: 0;
}
input[size='3'] {
width: 75%;
min-width: 75%;
padding: 0;
display: inline;
}
http://codepen.io/anon/pen/adPrey