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

【问题标题】：how to validate text in custom validate patterns using angular如何使用角度验证自定义验证模式中的文本
【发布时间】：2019-03-30 20:05:01
【问题描述】：

我想仅使用此模式~*\|:"<>?/ 验证文本。下面是我的文本框

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

【问题讨论】：

您尝试过 ng 表单吗？
不，我只尝试两种方式绑定。错误消息显示但我不能只验证这个 ~*\|:"?/ text
我想创建正确的正则表达式模式='^[^`~!@#$%\^&*()_+={}|[]\\:"]*$'
尝试 Angular 表单或 ngforms，这样它就可以作为 html 验证

标签： angular angular5 angular6 angular2-forms

【解决方案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 以获得更多了解。

【讨论】：

我只想验证这个 ~*\|:"?/ .如何只验证这个？
你可以使用这个正则表达式'^[~*\|:"<>?/]*$'
您遇到的错误是什么？不工作是什么意思？

【解决方案2】：

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

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

【讨论】：

我不习惯检查所有模式="^[^`~!@#$%\^&*()_+={}|[]\\:"]*$ " 我只想检查 ~*\|:"?/
你能举个例子吗？

【解决方案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>

【讨论】：