Как я могу ограничить поле ввода, чтобы принимать только строки внутри шаблона подхода?

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 />