Question

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

我想要的必需模式如下：名/姓：仅字母，最多30个电话号码：仅限数字，最多10个邮编：最多只能有5个数字地址：仅数字和字母城市/州：仅字母

和按钮中心

Answer 1

如果要使用模板驱动的验证，则可以利用ngModel来捕获element的值并执行验证。这是示例代码-

<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;
}