为什么没有以格式（xxx）xxx-xxxx显示输入字段？

Question

我正在尝试创建一个html视图，其中显示三个表单字段，这些字段一起收集格式为（xxx）xxx-xxxx的美国格式电话号码。

如何在使用css3，bootstrap和html5以及AngularJS的应用程序中编写css以实现此目的？

我当前的尝试正确地获得了三个输入字段大小，但完全混淆了parens (和)的位置，并且还弄乱了短划线-的位置。 parens和破折号几乎遍布整个屏幕，因为它们几乎位于不同的行中，与输入字段的位置几乎没有相关性。 需要对下面的代码进行哪些具体更改才能以格式(xxx) xxx-xxx打印出输入字段，给定css3，html5，bootstrap和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>

以下是视图中当前正在打印的代码的打印屏幕：

相比之下，正确的输出会将所有三个字段放在同一行中的(phonenum1) phonenum2-phonenum3

模式中的正确标点符号中

正在进行的努力：

另外，如果我采用@Pauli_D的建议并使用RegEx \d{3}[\-]\d{3}[\-]\d{4}偏离OP，则AngularJS表单验证仅部分有效。例如，在下面代码中的phonenum1输入中键入ANYTHING会导致视图显示Please enter a phone number in the format 111-222-3333警告，但是当您键入格式为{{1}的数字时警告不会消失}。以下是尝试@ Paulie_D建议的视图中的代码：

111-222-3333

这是服务 <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> 中的变量声明：

auth.js

使用@PaulieD修改的AngularJS代码提供以下打印屏幕。请注意，this.usPhone = "\d{3}[\-]\d{3}[\-]\d{4}"; 按钮仍然是阴影，因此无法提交表单：

那么需要做出哪些其他更改？

Answer 1

关于css对齐问题......

.col-sm-1 {
  padding-right: 0;
}

input[size='3'] {
  width: 75%;
  min-width: 75%;
  padding: 0;
  display: inline;
}

http://codepen.io/anon/pen/adPrey