Question

我想使某些输入字段仅可用于integer或decimal值。所以我得到了以下代码：

<input type="text" pattern="[0-9]*" [(ngModel)]="myValue" pInputText class="medium-field"
    (change)="calculate()"/>

因此，如果模式与输入不匹配，则会标记此字段。我仍然想在模式不匹配时禁用submit按钮。我可以通过某种方式将该值作为布尔值访问吗？还是有另一种方法？

Answer 1

如果您不想使用反应式表格，可以执行以下操作：

<input type="text" pattern="[0-9]*" [(ngModel)]="myValue" #myInput />
<button [disabled]="!myInput.validity.valid">Submit</button>

如果您输入的HTML有效性无效，则会禁用提交按钮。

Here是一个有效的示例。

我还建议您在type="number"中使用input。

Answer 2

如果您输入的内容与模式不匹配，该表格将被自动标记为无效。

您可以使用：

<form novalidate
      #form="ngForm">

     /* Your inputs */

     <button type="button"
             [disabled]="form.invalid">     // form as per the referenced #form="ngForm"
                                            // Disables if your inputs are invalid or doesn't meet with its pattern
         Submit
     </button>

Answer 3

尝试使用* ngIf和

对其进行表单验证

<button type="submit" [disabled]="form.invalid">SEND</button>

输入无效时禁用按钮

3 个答案: