材料设计表格所需图案答案

【问题标题】：Material design form required pattern材料设计表格所需图案
【发布时间】：2018-12-06 19:06:50
【问题描述】：

我想为我的字段设置一个必需的模式，但我使用的正则表达式不起作用并且无法弄清楚原因。我还想将我的“板载”按钮居中。这是我的代码的 stackblitz 链接：https://stackblitz.com/edit/angular-hpmxym?file=src%2Fapp%2Fapp.component.html

我想要的所需模式如下：名字/姓氏：仅限字母，最多 30 个电话号码：仅限数字，最多 10 个 zip：仅数字，最多 5 个地址：仅限数字和字母城市/州：仅限字母

和按钮中心

【问题讨论】：

【解决方案1】：

如果您想使用模板驱动的验证，那么您可以利用ngModel 来捕获元素的值并执行验证。这是示例代码 -

<input maxlength="5" type="text" name="zip" #zip="ngModel" [(ngModel)]="zipCode" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" placeholder="Zipcode" />

要使按钮或控件居中，您可以将其包裹在 div 中

<div class="wrapper">
   <input type="submit" name="signup_submit" value="onboard" (click)="changeView(15)"/>

并使用 css

.wrapper {
    text-align: center;
}

【讨论】：

Demo 仅使用一个字段zip 实现。您可以在输入下方看到错误。您可以根据需要格式化错误消息。
是的，但 zip 字段仍然允许超过 5 个数字、字母和特殊字符。
根据正则表达式它工作正常。它将接受5-6 数字，也可以接受12345-1234 之类的格式。如果输入错误的格式，那么您会在屏幕上看到 pattern 错误，否则您将看到 null 值表示没有错误。
是的，但我希望光标在达到 5 位时停止，我根本不希望允许输入字母
您可以在元素中使用maxlength="5" 。更新了链接。