如何使用 angular 验证自定义验证模式中的文本

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

你这样用

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 = '^[^`~!@#$%\^&*()_+={}|[\]\:"]*$';

但是，使用模式的最佳方式是使用反应形式，你可以参考这个link以获得更多的理解。

Answer 2

这是一个可以帮助您的示例，如果您有任何疑问，请在评论中问我

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

我正在使用这个正则表达式模式^[^~*\|>:"?</"]*$工作正常

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

如何使用 angular 验证自定义验证模式中的文本

how to validate text in custom validate patterns using angular

angular2-forms

angular

angular5

angular6