angular - PrimeNG フォーム検証

Question

primeNG コントロールと html コントロールを組み合わせて使用​​しています。問題は、primNG コントロールが電話マスクに対して適切に機能せず、オートコンプリートのスタイルが異なることです。

例: html (ユーザーがコントロールにフォーカスを設定し、タブで次のコントロールに移動した場合、電話が赤く表示されることはありません)

 <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="(999) 999-9999" 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>

オートコンプリートでは機能しますが、スタイルに一貫性がありません。

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>

下の画像を参照してください（マネージャーのオートコンプリートの下部ボーダーは、何かを選択して消去した場合にのみ赤くなります

TS

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

        });