title: PrimeNG Form Validation
body: <p>I am using a mix of primeNG controls and html controls. The issue is the primeNG controls don't work properly for the phone mask and for he auto-complete the style is different .</p>
  
  <p>for example:
  <strong>html</strong> (phone is never showing as red if the user set focus on the control then just tab to the next control)</p>
  
  <pre><code> &lt;div class="form-group col-xs-3 col-md-3"
                                         [ngClass]="{
                                       'has-error':(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &amp;&amp;
                                       !ersaForm.get('phone').valid
                                       }"&gt;
  
                                      &lt;label for="phoneId" class="control-label"&gt;Phone&lt;/label&gt;&lt;br /&gt;
                                      &lt;!--&lt;input type="tel"  class="form-control" id="phone" placeholder="Phone"&gt;--&gt;
                                      &lt;p-inputMask mask="(999) 999-9999" formControlName="phone" id="nameId" required placeholder="Phone (required)"&gt;&lt;/p-inputMask&gt;
                                      &lt;span class="help-block" *ngIf="(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &amp;&amp;
                                       ersaForm.get('phone').errors"&gt;
                                          &lt;span *ngIf="ersaForm.get('phone').errors"&gt;
                                              Phone Number must be 9 charatcers.
                                          &lt;/span&gt;
  
                                      &lt;/span&gt;
  
                                  &lt;/div&gt;
  </code></pre>
  
  <p>for the auto complete it works , but the style is not consistent .</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>                        &lt;div class="form-group col-xs-3 col-md-3"
                               [ngClass]="{
                               'has-error':(ersaForm.get('costCenter').touched || ersaForm.get('costCenter').dirty ) &amp;&amp;
                               !ersaForm.get('costCenter').valid
                               }"&gt;
                              &lt;label for="costCenterId" class="control-label"&gt;Cost Center&lt;/label&gt;
                              &lt;p-autoComplete formControlName="costCenter" id="costCenterId"  [suggestions]="iCostCenter" placeholder="Cost Center (required)" (completeMethod)="searchCC($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="cost_center_name" dataKey="cost_center_id" [dropdown]="true"&gt;&lt;/p-autoComplete&gt;
  
                          &lt;/div&gt;
                          &lt;div class="form-group col-xs-3 col-md-3"
                               [ngClass]="{
                               'has-error':(ersaForm.get('gradeLevel').touched || ersaForm.get('gradeLevel').dirty ) &amp;&amp;
                               !ersaForm.get('gradeLevel').valid
                               }"&gt;
                              &lt;label for="gradeLevelId" class="control-label"&gt;Grade Level&lt;/label&gt;
                              &lt;input type="text"  class="form-control" id="gradeLevelId" formControlName="gradeLevel" maxlength="2" placeholder="Grade Level (required)"&gt;
                              &lt;span class="help-block" *ngIf="(ersaForm.get('gradeLevel').touched || ersaForm.get('gradeLevel').dirty ) &amp;&amp;
                               ersaForm.get('gradeLevel').errors"&gt;
                                  &lt;span *ngIf="ersaForm.get('gradeLevel').errors.minlength"&gt;
                                      Grade Level must be 2 characters.
                                  &lt;/span&gt;
  
                              &lt;/span&gt;
  
  
                          &lt;/div&gt;
                          &lt;div class="form-group col-xs-3 col-md-3"
                               [ngClass]="{
                               'has-error':(ersaForm.get('manager').touched || ersaForm.get('manager').dirty ) &amp;&amp;
                               !ersaForm.get('manager').valid
                               }"&gt;
                              &lt;label for="managerId" class="control-label"&gt;Manager&lt;/label&gt;
                              &lt;p-autoComplete
                     [![enter image description here][1]][1]           [suggestions]="iManager" id="ManagerId" formControlName="manager" placeholder="Manager (required)" (completeMethod)="searchManager($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="NT_USER_NM" dataKey="ORG_BRH_NO" [dropdown]="true"&gt;&lt;/p-autoComplete&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>see the below image (the bottom boarder of the manager auto complete becomes red only if I select something then erase it </p>
  
  <p><a href="https://i.stack.imgur.com/G80ev.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G80ev.jpg" alt="enter image description here"></a></p>
  
  <p><strong>TS</strong></p>
  
  <pre><code>this.ersaForm = this._fb.group({
              gradeLevel: ['', [Validators.required, Validators.minLength(2)]],
              manager: ['', Validators.required],
              phone: ['', [Validators.required, Validators.minLength(9)]],
  
          });
  </code></pre>