PrimeNG Form Validation

Question

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 .

for example: html (phone is never showing as red if the user set focus on the control then just tab to the next control)

 <div class="form-group col-xs-3 col-md-3"
                                       [ngClass]="{
                                     'has-error':(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     !ersaForm.get('phone').valid
                                     }">

                                    <label for="phoneId" class="control-label">Phone</label><br />
                                    <!--<input type="tel"  class="form-control" id="phone" placeholder="Phone">-->
                                    <p-inputMask mask="[phone]" formControlName="phone" id="nameId" required placeholder="Phone (required)"></p-inputMask>
                                    <span class="help-block" *ngIf="(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     ersaForm.get('phone').errors">
                                        <span *ngIf="ersaForm.get('phone').errors">
                                            Phone Number must be 9 charatcers.
                                        </span>

                                    </span>

                                </div>

for the auto complete it works , but the style is not consistent .

html

                        <div class="form-group col-xs-3 col-md-3"
                             [ngClass]="{
                             'has-error':(ersaForm.get('costCenter').touched || ersaForm.get('costCenter').dirty ) &&
                             !ersaForm.get('costCenter').valid
                             }">
                            <label for="costCenterId" class="control-label">Cost Center</label>
                            <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"></p-autoComplete>

                        </div>
                        <div class="form-group col-xs-3 col-md-3"
                             [ngClass]="{
                             'has-error':(ersaForm.get('gradeLevel').touched || ersaForm.get('gradeLevel').dirty ) &&
                             !ersaForm.get('gradeLevel').valid
                             }">
                            <label for="gradeLevelId" class="control-label">Grade Level</label>
                            <input type="text"  class="form-control" id="gradeLevelId" formControlName="gradeLevel" maxlength="2" placeholder="Grade Level (required)">
                            <span class="help-block" *ngIf="(ersaForm.get('gradeLevel').touched || ersaForm.get('gradeLevel').dirty ) &&
                             ersaForm.get('gradeLevel').errors">
                                <span *ngIf="ersaForm.get('gradeLevel').errors.minlength">
                                    Grade Level must be 2 characters.
                                </span>

                            </span>


                        </div>
                        <div class="form-group col-xs-3 col-md-3"
                             [ngClass]="{
                             'has-error':(ersaForm.get('manager').touched || ersaForm.get('manager').dirty ) &&
                             !ersaForm.get('manager').valid
                             }">
                            <label for="managerId" class="control-label">Manager</label>
                            <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"></p-autoComplete>

                        </div>
                    </div>

see the below image (the bottom boarder of the manager auto complete becomes red only if I select something then erase it

TS

this.ersaForm = this._fb.group({
            gradeLevel: ['', [Validators.required, Validators.minLength(2)]],
            manager: ['', Validators.required],
            phone: ['', [Validators.required, Validators.minLength(9)]],

        });