如何在有一个输入字段的角度2中验证表单？

Question

我有one输入字段，用户可以在其中输入email以及10 digit phone number如果满足任何此条件，我想启用continue按钮。当用户键入enable时，我可以email按钮但是当用户键入10 digit mobile number

时我无法启用该按钮

这是我的代码 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})$"