PrimeNG表单验证

Question

我混合使用primeNG控件和html控件。问题是primeNG控件无法在手机蒙版上正常使用，并且由于他自动完成，样式有所不同。

例如： 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)]],

        });