角输入模式验证不起作用

stephencurry30

有人可以向我解释为什么ngIf在出现模式错误时应该激活我的我不工作吗？

<div>
   <form #myForm="ngForm">
      <h1>Angular Calculator</h1>

      <h4>Sum:</h4>
      <input [(ngModel)]='add1' type="text" name="add1" size="5" pattern="^(0-9)*(/.(0-9)+)?$" required> +
      <input [(ngModel)]='add2' type="text" name="add2" size="5" pattern="^(0-9)*(/.(0-9)+)?$" required>

      <p *ngIf="add1?.errors?.pattern">
         Only numeric characters allowed</p>
      <p *ngIf="add2?.errors?.pattern">
         Only numeric characters allowed</p>
      &nbsp;
      <button (click)='CalcAdd()'>
         =
      </button>
   </form>
</div>

阿杰·奥哈（Ajay Ojha）

使用“ myForm”对象显示错误消息。我已经更改了代码ngIf条件。参见stackblitz上的工作示例

这是更改后的代码。

  <div>
  <form #myForm="ngForm">
  <h1>Angular Calculator</h1>

  <h4>Sum:</h4>
  <input [(ngModel)]='add1' type="text" id="add1" name="add1" size="5" pattern="^(0-9)*(/.(0-9)+)?$"   required/> + <input [(ngModel)]='add2' type="text" name="add2"  size="5" pattern="^(0-9)*(/.(0-9)+)?$" required>

  <p *ngIf="myForm.controls.add1?.errors?.pattern">
      Only numeric characters allowed</p>
  <p *ngIf="myForm.controls.add2?.errors?.pattern">
      Only numeric characters allowed</p>
  &nbsp;
  <button (click)='CalcAdd()'>
    =
  </button>
  </form>
  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。