angular - PrimeNG 表单验证

Question

我混合使用 primeNG 控件和 html 控件。问题是 primeNG 控件无法正常用于电话蒙版，并且对于他的自动完成样式不同。

例如： html（如果用户将焦点设置在控件上，则手机永远不会显示为红色，然后只需 Tab 到下一个控件）

 <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)]],

        });