javascript - 如何验证具有一个输入字段的 Angular 2 中的表单？

Question

我有一个一个输入字段，如果满足任何一个条件，用户可以在其中输入电子邮件以及10位电话号码想要启用 continue 按钮。当用户键入 email 时，我可以启用 按钮，但当用户键入 10 位手机号码

时，我无法启用该按钮

这是我的代码 https://stackblitz.com/edit/angular-p5knn6?file=src%2Fapp%2Flogin-component%2Flogin-component.component.html

<div class="login_div">
  <form  #loginForm="ngForm">
    <input type="text" name="email"
           autocomplete="off"
           placeholder="Enter the Email or Number"
           [(ngModel)]="userenterValue"
           required
           pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
    <input type="submit" value="Continue"
           class="btn"
           [class.disbled]="!loginForm.valid"
           [disabled]="!loginForm.valid">
  </form>
</div>

Answer 1

只需使用这样的模式:

pattern="^(\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+)$|^(\d{10})$"