Question

我有一个简单的输入，用于电话号码，我想验证只有数字，长度是10位数。

<input [(ngModel)]="client.phone" class="form-input" name="phone" type="phone" [value]="client.phone">

如果不使用FormBuilder，我该怎么做才能验证这一点？似乎FormBuilder只会让事情复杂化，我只想验证这一点。

Answer 1

使用内置模式验证器非常简单：

<input [(ngModel)]="client.phone" pattern="[0-9]{10}" class="form-input" name="phone" type="phone" [value]="client.phone">

Answer 2

<input type="number" name="phone" max="10">

您可以使用类型编号和最大值

Answer 3

以下是我的Pluralsight课程的一个例子。第一个例子是使用模板驱动的表单。它使用简单的模式来验证电子邮件地址：

            <div class="form-group"
                [ngClass]="{'has-error': (emailVar.touched || emailVar.dirty) && !emailVar.valid }">
                <label class="col-md-2 control-label" 
                    for="emailId">Email</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="emailId" 
                           type="email" 
                           placeholder="Email (required)" 
                           required
                           pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+"
                           [(ngModel)]="customer.email"
                           name="email"
                           #emailVar="ngModel" />
                    <span class="help-block" *ngIf="(emailVar.touched || emailVar.dirty) && emailVar.errors">
                        <span *ngIf="emailVar.errors.required">
                            Please enter your email address.
                        </span>
                        <span *ngIf="emailVar.errors.pattern">
                            Please enter a valid email address.
                        </span>

                        <!-- This one does not work -->
                        <span *ngIf="emailVar.errors.email">
                            Please enter a valid email address.
                        </span>
                    </span>
                </div>
            </div>

此示例使用Reactive Forms进行同样的操作。

    this.customerForm = this.fb.group({
        firstName: ['', [Validators.required, Validators.minLength(3)]],
        lastName: ['', [Validators.required, Validators.maxLength(50)]],
        email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+')]],
        sendCatalog: true
    });

因此使用模式非常类似于Angular技术。我只是指向HTML网站，因为它提供了一些电话号码模式的建议，您可以从中选择并使用我的示例中显示的电子邮件模式。

如果您想要链接到相关的github代码，请告诉我。

Answer 4

https://angular.io/docs/ts/latest/guide/forms.html

<form role="form" #f="ngForm" novalidate>
    <input class="form-input" type="number" [(ngModel)]="client.phone" name="phone" max="10">
    <button type="submit" [disabled]="f.form.invalid">
</form>

Angular 2：简单的输入验证

4 个答案: