как проверить текст в пользовательских шаблонах проверки с использованием угловых

Question

Я хочу проверить текст только с использованием этого шаблона ~*\|:"<>?/. Ниже мое текстовое поле

<input type="text" [(ngModel)] ="newReferenceValue"  #referencevar="ngModel" name="referencevar" (keyup.enter)="save()" pattern='^[^`~!@#$%\^&*()_+={}|[\]\\:"]*$' style="margin: 8px;width: 60%;">

 <div *ngIf="referencevar.errors?.pattern">
         not valid not partens  
  </div>

Answer 1

Вот пример, который поможет вам, и если у вас есть какие-либо вопросы, спросите меня в комментариях

    <form role="form" name="form" (ngSubmit)="f.form.valid" #f="ngForm" novalidate>

    <input type="text" id="newReferenceValue" name="newReferenceValue" [(ngModel)] ="newReferenceValue"  #referencevar="ngModel" pattern="^[^`~!@#$%\^&*()_+={}|[\]\\:"]*$" (keyup.enter)="save()" [ngClass]="{ 'is-invalid': f.submitted && referencevar.invalid }" style="margin: 8px;width: 60%;">

<div *ngIf="f.submitted && referencevar.invalid" class="invalid-feedback">

 <div *ngIf="referencevar.errors.pattern" class="error"> not valid not partens</div>
                                                                     </div>

    </form>

Answer 2

Я использую этот шаблон Regex ^[^~*\\|>:"?</"]*$ отлично работает

<input type="text" [(ngModel)] ="newReferenceValue"  #referencevar="ngModel" name="referencevar"  maxlength="{{textLengthValue}}" (keyup.enter)="save()" pattern='^[^~*\\|>:"?</"]*$' style="margin: 8px;width: 60%;">
 <div *ngIf="referencevar.errors?.pattern">
 Using ~*\|:"<>?/ reference value not applicabale  
 </div> 

Answer 3

Вы используете этот способ

html

<input type="text" [(ngModel)] ="newReferenceValue"  #referencevar="ngModel" name="referencevar" (keyup.enter)="save()" [pattern]="pattern" style="margin: 8px;width: 60%;">

 <div *ngIf="referencevar.errors?.pattern">
         not valid not partens  
  </div>

ts

pattern = '^[^`~!@#$%\^&*()_+={}|[\]\\:"]*$';

Однако лучший способиспользование шаблонов будет путем использования реактивных форм, вы можете обратиться к этой ссылке для большего понимания.