title: Use custom directive value to optionally display form element
body: <p>I'm trying to use the output from a custom validation directive in one element <code>&lt;input&gt;</code> to control the display of another element <code>&lt;p&gt;</code>, but can't figure out how to make it work. This is what I have so far:</p>
  
  <p>Custom Directive (<code>no-special-chars-directive.ts</code>)</p>
  
  <pre><code>import { Directive } from '@angular/core';
  import { Validator, 
          FormControl, 
          NG_VALIDATORS, 
          ValidationErrors} from "@angular/forms";
  
  @Directive({
    selector: '[appNoSpecialChars]',
    providers: [{provide: NG_VALIDATORS, useExisting: NoSpecialCharsDirective, multi: true}],
    exportAs: 'noSpecChars'
  })
  export class NoSpecialCharsDirective implements Validator{
  
    constructor() { }
    validate(c: FormControl): ValidationErrors {
      //console.log("input value: " + c.value);
      const hasSpecialChars = /[~!@#\^&amp;*+=\-\[\]\';,/{}|\":&lt;&gt;\?\\()]/.test(c.value);
      const message = {
        'hasSpecialChars' : {
          'message': 'No Special Chars Allowed'
        }
      };
      return hasSpecialChars ? message : null;
    }
  }
  </code></pre>
  
  <p>Here is the template: (<code>git-search.component.html</code>)</p>
  
  <pre><code>&lt;h3&gt;{{title}} - {{displayQuery}} -- (version: Template Driven)&lt;/h3&gt;
  &lt;form #myForm="ngForm" (ngSubmit)="sendQuery()"&gt;
    &lt;div *ngFor="let key of modelKeys"&gt;
        {{key}} 
        &lt;input  #myInput name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" required *ngIf="key==='q'" appNoSpecialChars/&gt;
        &lt;input  #myInput name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" minlength = '2' maxlength='4' *ngIf="key==='stars'" appNoSpecialChars /&gt;      
        &lt;input  #myInput name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" *ngIf="key!=='q' &amp;&amp; key!=='stars'" appNoSpecialChars/&gt; 
        &lt;p *ngIf="!myForm[key].valid" &gt;Not valid&lt;/p&gt; 
    &lt;/div&gt;
    &lt;button type="submit" [disabled]="!myForm.valid"&gt;Submit&lt;/button&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>I want the <code>&lt;p&gt;</code> element to optionally display whenever there is invalid input in the preceding <code>&lt;input&gt;</code>. I've tried multiple permutations for the <code>*ngIf</code> statement and in the inputs themselves, but haven't found anything that works yet. Everything worked fine before I started playing around with the optional display of the <code>&lt;p&gt;</code> element.  Any ideas?</p>