我在一个页面上有两个表单，但提交按钮对两个验证都有效？

Question

我有两个表单和一个提交按钮。我的问题是，我对两个 forms.But 都进行了验证，我希望这些验证单独工作，就像当我提交 clusterForm 时，它应该验证并且 post 调用应该发生。但在我填写其他表格之前它不会发生。这是我的 ts 代码。

  sendclusteridApi() {
    this.submitted = true;
    if (this.clusterForm.invalid) {
      return;
    } else if (this.productFG.invalid) {
      return;
    }
    const request = this.createRequest();

    this.projectclosterservice.postStoryStatus(request).subscribe(
      (res: any) => {
        this.filtering = res["1tool-gitlab-pipeline"].data.filtering;
        this.clusterForm.reset();
        this.formData.reset();
      },
      (error) => {}
    );
  }

Html:集群形式


    <div *ngIf="submitted && fclusterForm.clusternames.errors" class="error-feedback error">
      <p *ngIf="fclusterForm.clusternames.errors?.required" class="text-danger ">
        Please select Cluster
      </p>
    </div>

productFG 表单：及其控件

   <div *ngIf="submitted && isTouchedAndRequired(i, key)" class="error-feedback error">
     <p class="text-danger">{{key | titlecase}} is required.</p>
   </div>


   <div class="d-flex justify-content-end">
     <button (click)="sendclusteridApi()" class="btn btn-primary px-3 py-2">Save</button>
   </div>

Answer 1

试试下面的代码

if(this.clusterForm.invalid || (this.checkedIDs.length!=0 && this.productFG.invalid)){
    this.errorMsg="Please fill all form entries. ";
    return false;
  }

我在一个页面上有两个表单，但提交按钮对两个验证都有效？

I have two forms on a page but submit button is working on both validations?

validation

angular