PrimeNG 控件未触发的反应式表单

Question

我有使用响应式表单的 PrimeNG 控件的 HTML 页面。 PrimeNG 控件在触摸控件时不会触发，脏且无效（如果键入值然后清除）。但是，如果我只是在不输入任何值的情况下按 Tab 键退出，那么它可以正常工作。

示例：

（请参阅标签和框边框为“红色”）

现在，如果我从位置自动完成下拉列表中选择一个值，然后删除它与号码中的电话类型相同，然后删除，则不再触发验证

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"   styleClass="form-control" [style]="{'width': '100%','height':'34px'}"  id="phoneId"  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.phonePBXCheck">
                                            Phone Number does not exist.
                                        </span>

                                    </span>

                                </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"  [suggestions]="iOffice" forceSelection="true" placeholder="Office (required)" inputStyleClass="form-control" (completeMethod)="searchOffice($event)"  [style]="{'width': '100%','display': 'inline-flex','height':'34px'}"  field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

                                </div>

TS

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

        });

function phoneCheck(phone: string): ValidatorFn{


    return (c: AbstractControl): { [key: string]: boolean } | null => {

          some logic
        };
        return null;
    };
}

缺少什么！

****************************************更新****** ************************************************

我把客户验证器拿出来

<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>

TS

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

        });

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

F12（即使没有输入，输入掩码也会显示 ng-valid）

<p-inputmask _ngcontent-c2="" formcontrolname="phone" id="phoneId" mask="(999) 999-9999" placeholder="Phone (required)" styleclass="form-control" unmask="true" ng-reflect-style="[object Object]" ng-reflect-style-class="form-control" ng-reflect-placeholder="Phone (required)" ng-reflect-unmask="true" ng-reflect-mask="(999) 999-9999" ng-reflect-name="phone" class="ng-touched ng-dirty ng-valid">
<input pinputtext="" class="form-control ui-inputtext ui-corner-all ui-state-default ui-widget" ng-reflect-ng-class="form-control" ng-reflect-ng-style="[object Object]" type="text" placeholder="Phone (required)" style="width: 100%; height: 34px;"></p-inputmask>
<div _ngcontent-c2=""> This form is valid: false </div>

Answer 1

响应式表单验证未通过 p-dropdown 触发 --------------------------enter code here--------- ----------

HTML

<p-dropdown [options]="lineNumbers" formControlName="Selectedline" [class.is-invalid]="Selectedline.dirty && Selectedline.touched" styleClass="form-control" placeholder="Select Line" [filter]="false" ></p-dropdown>
                          <div *ngIf="Selectedline.dirty && Selectedline.touched">
                                <small *ngIf="Selectedline.errors?.required" class="text-danger">Line Number is required</small>
                              </div>
                        </div>

TS

ngOnInit() {
    this.createIOForm = this.fb.group({
      Selectedline: ["", Validators.required]


    });
  }

  Selectedline() {
    this.createIOForm.get("Selectedline");
  }

Answer 2

尝试标记为脏以触发验证。 如果您查看 p-inputmask 的文档，您会发现您可能可以使用 (onBlur)。 对于下拉菜单，您可以使用 (onChange)。

这是一个例子......

在 .html 文件中

<p-inputMask mask="(999) (onBlur)="checkValidity();" ...</p-inputMask>
...
<p-dropdown ... (onChange)="checkValidity(); "></p-dropdown>

在 .ts 文件中

 public checkValidity(): void {
        Object.keys(this.ersaForm.controls).forEach((key) => {
            this.formGroup.controls[key].markAsDirty();
        });
    }