我有两个表单在一个页面上，但提交按钮是工作在两个验证?

Question

我有两个表单，一个提交按钮。这里我的问题是，我把验证两种形式。但我希望这些验证工作分开，像当我提交clusterForm，它应该验证和post调用应该发生。但要等我填完另一张表格才行。这是我的代码。

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

<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 form:及其控件

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