在表单内单击按钮时的部分表单验证，angular 反应式

Question

Angular 下面的反应形式。有 2 个按钮，一个提交和一个获取详细信息。

工作提交按钮有表单验证，只有手机号码是强制性的。这样就实现了在组件中使用required.

我该怎么做 另一个按钮获取，我需要验证 2 个字段 ID 和日期是强制性的，并在 <span> 中显示错误消息，这不起作用

表格

<form role="form" [formGroup]="pForm" >
<div class="row display-flex">
   <div class="col-lg-3 col-md-4 col-sm-6">
      <label>Id </label>
      <input class="form-control form-control-sm" formControlName="id" type="number" />
      <span *ngIf="submitted && f.errors && f.errors.idRequired"
         class="tooltiptext">{{'Id is required'}}</span>
   </div>
   <div class="col-lg-3 col-md-4 col-sm-6">
      <label> Date </label>
      <p-calendar type="number" dateFormat="dd-mm-yy" formControlName="eDate" 
         monthNavigator="true" appendTo="body"  yearNavigator="true"
         yearRange="1930:2030" >
      </p-calendar>
       <span *ngIf="submitted && f.errors && f.errors.eDateRequired"
         class="tooltiptext">{{'Id is required'}}</span>
   </div>
   <div class="col-lg-3 col-md-4 col-sm-6">
      <button class="btn btn-sm btn-primary bw" (click)="fetch()" 
         translate>traveler.getDetails</button>
   </div>
   <div class="col-lg-2 col-md-2 col-sm-3">
      <label>Mobile <span class="mdtr">*</span></label>
      <input type="text" numeric class="form-control form-control-sm" [readonly] = "gsm" formControlName="mobileNo" />
      <span *ngIf="submitted && f.mobileNo.errors" class="tooltiptext" >{{'Mobile is required'}}</span>
   </div>
</div>
<button class="btn btn-sm btn-primary" type="submit" (click)="saveForm()">
Save
</button>
</form>

此处表格已初始化，getDetail() 我尝试将其他 2 个字段设置为必填字段，但没有成功

this.pForm = this.fb.group({
    id: [null],
    eDate: [null],
    mobileNo: ["", Validators.required]
})

get f() {
    return this.pForm.controls;
}


getDetail() {
    this.submitted = true;
    this.pForm.setValidators({
        idRequired: true,
        eDateRequired: true
    });

}

saveForm() {
        this.submitted = true;
        if (this.pForm.invalid) {
            Swal.fire("mandatory fiels are missing);
                return;
            }
        }

Answer 1

当您点击 getDetails 时，您必须如下显式设置其他字段的验证器。

此外，您必须更新现有表格的有效性，如下所示。

getDetail() {
    this.submitted = true;
    this.pForm.get('id').setValidators([
        Validators.required,
    ]);
    this.pForm.get('eDate').setValidators([
        Validators.required,
    ]);
    this.pForm.controls['id'].updateValueAndValidity()
    this.pForm.controls['eDate'].updateValueAndValidity()
}

提交后，您可以删除验证器，如下所示

    this.pForm.controls['id'].setValidators([]);
    this.pForm.controls['eDate'].setValidators([]);
    this.pForm.controls['id'].updateValueAndValidity()
    this.pForm.controls['eDate'].updateValueAndValidity()

这是工作Stackblitz

在表单内单击按钮时的部分表单验证，angular 反应式

Partial form validation on button click inside the form, angular reactive

typescript

angular-reactive-forms

angular8