3

アプリで PrimeNG autoComplete コンポーネントを使用しています。有効で無効なものはすべて「赤」で表示します。デフォルトでは、コントロールを無効にする検証がない限り、Angular はすべての入力フィールドを ng-valid スタイル クラスでマークします。これはAngularでは標準のようです。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 />
                                        <p-inputMask mask="(999) 999-9999" formControlName="phone" (onBlur)="checkValidity();" unmask="true"  styleClass="form-control" [style]="{'width': '100%','height':'34px'}"  id="phoneId"  placeholder="Phone (required)"></p-inputMask>

                                    </div>
  <div class="form-group col-xs-3 col-md-3"
                                     [ngClass]="{
                                     'has-error':(ersaForm.get('location').touched || ersaForm.get('location').dirty ) &&
                                     !ersaForm.get('location').valid
                                     }">
                                    <label for="locationId" class="control-label">Location</label>
                                    <p-autoComplete formControlName="location" id="locationId" (onBlur)="checkValidity()" [suggestions]="iOffice" forceSelection="true" placeholder="Office (required)" inputStyleClass="form-control" (completeMethod)="searchOffice($event)" [style]="{'width': '100%','display': 'inline-flex','height':'34px'}" field="ORG_BRH_ADDR_LN" dataKey="ORG_BRH_NO" [dropdown]="true"></p-autoComplete>

                                </div>

TSコード

this.ersaForm = this._fb.group({
            phone: new FormControl('', Validators.required),
            location: ['', Validators.required],

            });

        checkValidity(): void {
                Object.keys(this.ersaForm.controls).forEach((key) => {
                    console.log('inside validation');
                    this.ersaForm.controls[key].markAsDirty;
                //    this.ersaForm.controls[key].
                });
            }
4

1 に答える 1

0

これは現在2歳ですが、私はこの問題にぶつかり、解決策を見つけました. それが他の人を助けることを願っています。

PrimeNGのv.12を使用しています。

少なくとも p-dropdowns の場合、要素にng-invalidとng-dirtyクラスの両方が適用されている場合、境界線が赤に変更されているように見えます。無効な場合にのみ境界線を赤くする必要がありました。次のオーバーライドを追加して、問題を解決しました。

p-dropdown.ng-invalid > .p-dropdown {
    border-color: #f44336; // This color HEX value comes from PrimeNG.
}
于 2021-10-05T15:27:19.350 に答える