如何将Angular自定义验证指令的输出消息显示到表单其他HTML元素？

嘿，这事儿其实很简单，咱们利用Angular模板驱动表单里NgModel的特性就能搞定。你的自定义验证指令已经正确返回了错误信息，现在只需要在模板里拿到对应表单控件的错误状态，就能把消息显示出来了。

步骤1：给输入框添加NgModel模板引用 #

首先，给每个带appNoSpecialChars指令的input添加ngModel的模板引用变量（比如#inputCtrl="ngModel"），这样我们就能在模板里访问这个控件的验证状态了。修改你的input标签，比如：

<input #inputCtrl="ngModel" name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" required *ngIf="key==='q'" appNoSpecialChars/>

其他两个input也做同样的修改——可以把原来的#myInput替换成#inputCtrl="ngModel"，或者保留#myInput同时加上="ngModel"（比如#myInput="ngModel"），只要能拿到NgModel实例就行。

步骤2：在<p>元素里显示错误消息 #

接下来，修改你的<p>标签，通过刚才的模板引用变量来判断控件是否有hasSpecialChars错误，如果有就显示对应的消息：

<p *ngIf="inputCtrl.errors?.hasSpecialChars" style="color: red;">{{ inputCtrl.errors.hasSpecialChars.message }}</p>

这里用*ngIf控制消息的显示（只有当错误存在时才渲染），然后通过inputCtrl.errors.hasSpecialChars.message直接提取你在指令里定义的错误文本。

修改后的完整模板代码 #

把这些修改整合到你的模板里，最终代码如下：

<h3>{{title}} - {{displayQuery}} -- (version: Template Driven)</h3>
<form #myForm="ngForm" (ngSubmit)="sendQuery()">
 <div *ngFor="let key of modelKeys">
 {{key}}
 <input #inputCtrl="ngModel" name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" required *ngIf="key==='q'" appNoSpecialChars/>
 <input #inputCtrl="ngModel" name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" minlength = '2' maxlength='4' *ngIf="key==='stars'" appNoSpecialChars />
 <input #inputCtrl="ngModel" name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" *ngIf="key!=='q' && key!=='stars'" appNoSpecialChars/>
 <!-- 现在会根据验证状态显示指令里的错误消息 -->
 <p *ngIf="inputCtrl.errors?.hasSpecialChars" style="color: red;">{{ inputCtrl.errors.hasSpecialChars.message }}</p>
 </div>
 <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

原理说明 #

Angular的模板驱动表单中，每个带ngModel的控件都会创建一个NgModel实例。当你使用自定义验证器（比如你的appNoSpecialChars）时，验证返回的ValidationErrors会自动附加到这个NgModel实例的errors属性上。所以我们只需要通过模板引用变量拿到这个NgModel，就能直接访问到错误信息啦。

内容的提问来源于stack exchange，提问作者Crowdpleasr