如何限制输入字段在模板方法中仅接受内部字符串？

Question

我在表单中有输入字段，不允许用户在其中写数字，只是字符串。 这是我在模板方法中的输入，其中我限制了长度至少应为3个字符，并且是必填项。

 <input class="form-control"
                 id="productNameId"
                 type="text"
                 placeholder="Name (required)"
                 required
                 minlength="3"
                 [(ngModel)]=product.productName
                 name="productName"
                 #productNameVar="ngModel"
                 [ngClass]="{'is-invalid': (productNameVar.touched || 
                                            productNameVar.dirty ||
                                            product.id !== 0) && 
                                            !productNameVar.valid }" />
          <span class="invalid-feedback">
            <span *ngIf="productNameVar.errors?.required">
              Product name is required.
            </span>
            <span *ngIf="productNameVar.errors?.minlength">
              Product name must be at least three characters.
            </span>
          </span>

Answer 1

在输入标签上，使用pattern属性将正则表达式用于验证：

<input ... pattern="[A-Za-z]{3,}" required />