Question

我有使用反应形式的带有PrimeNG控件的HTML页面。触摸控件，脏污和无效（如果键入值然后将其清除）时，不会触发PrimeNG控件。但是，如果我不输入任何值即按Tab键然后按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-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();
        });
    }

Answer 2

响应式表单验证未通过p-dropdown触发 -------------------------------------- docker ------- ------------

HTML

enter code here

TS

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

PrimeNG控件未触发的反应形式

2 个答案:

HTML

TS