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

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

但是，使用模式的最佳方法是使用反应形式，您可以参考此链接以获得更多理解。

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

我正在使用这种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>