如何驗證html頁面中的多個表單？

Question

我有一個html頁面，其中有5個html頁面。如果任何驗證失敗，我想禁用提交按鈕。但我有2種形式總是可見的，3種形式是隱藏的。並且這三種形式僅基於某些條件顯示。所以可以有2,3,4或5種形式可見。

所以，如果我嘗試下面的代碼，它不能正常工作，因爲form3，form4和form5不可見。

<form class="form-horizontal" role="form" name="form1"> 
<form class="form-horizontal" role="form" name="form2"> 
<form class="form-horizontal" role="form" name="form3" *ngIf="condition1"> 
<form class="form-horizontal" role="form" name="form4" *ngIf="condition2"> 
<form class="form-horizontal" role="form" name="form5" *ngIf="condition3"> 

<button type="button" class="btn btn-primary" (click)="onSubmitBtnClick()" [disabled]="!form1.form.valid || !form2.form.valid || !form3.form.valid || !form4.form.valid || !form5.form.valid">Save</button> 

所以我該如何處理這種情況。

錯誤：

Cannot read property 'form' of undefined

Answer 1

使用角度的反應性形式+嵌套FormGroups：https://angular.io/guide/reactive-forms#nested-formgroups

一般，當頁面被加載的形式應具有3組（每1「形式」）。 申報形式：

this.form = this.fb.group({ 
    subForm1: this.fb.group({ 
    subForm1_field1: ['', Validators.required ], 
    subForm1_field2: ['', Validators.required, Validators.min(5) ], 
    }), 
    subForm2: this.fb.group({ 
    subForm2_field1: '', 
    subForm2_field2: ['', Validators.required, Validators.max(10) ], 
    }), 
    subForm3: this.fb.group({ 
    subForm3_field1: '', 
    }) 
}); 

所以最後的提交按鈕，您只能使用父窗體獲得的驗證狀態（這將是false如果從任何嵌套形式的組中的任何字段無效）。 HTML代碼：

<input type="checkbox" (ngModel)="onShowSubForm3()"/><label>Show Form3</label> 
<form [formGroup]="form"> 
    <div class="form-horizontal"><!-- your inputs goes here for subForm1 --></div> 
    <div class="form-horizontal"><!-- your inputs goes here for subForm2 --></div> 
    <div class="form-horizontal" *ngIf="showSubForm3"><!-- your inputs goes here for subForm3 --></div> 
</form> 
<button type="button" (click)="submitSubForm1()" [disabled]="!form.get("subForm3").valid">Send 1</button> <!-- is disabled only if any field from `subForm3` is invalid --> 
<button type="button" (click)="submitAllForms()" [disabled]="!form.valid">Send All</button> <!-- is disabled if any field is invalid --> 

代碼發送形式/發送1子窗體：

submitAllForms(){ 
    let formValue = this.form.value(); 
    /*formValue = { 
     subForm1: { 
      subForm1_field1: "val1-1", 
      subForm1_field2: "val1-2", 
     }, 
     subForm2: { 
      subForm2_field1: "val2-1", 
      subForm2_field2: "val2-2", 
     }, 
    };*/ 
    this.http.post("/url", {data: formValue}); 
} 

submitSubForm1(){ 
    let subForm1Value = this.form.get["subForm1"].value; 
    /*subForm1Value = { 
     subForm1_field1: "val1-1", 
     subForm1_field2: "val1-2", 
    };*/ 
    this.http.post("/url", {data: subForm1Value}); 
} 

每次需要顯示/隱藏新的子表格時， - 更新this.form（你可能希望保存所有字段，但更新僅限於Validators）。

showSubForm3: boolean = false; 

onShowSubForm3(value){ 
    this.showSubForm3 = value; 
    //THIS CODE CAN BE OPTIMIZED TO UPDATE ENTIRE `FormGroup` WITH NEW VALIDATORS 
    let field = this.form.controls["subForm3.subForm3_field1"]; 
    if(value){ 
     field.setValidators(Validators.compose([Validators.required])); 
    }else{ 
     field.setValidators(Validators.compose([])); 
    } 
    field.updateValueAndValidity(); 
} 

Answer 2

你可以做到這一點。我沒有觸發一堆變化檢測的方式已經檢查了錯誤的方式是在我的組件中使用單數函數來檢查表單驗證以及按鈕是否應該被禁用。這需要我爲每個表格使用ViewChild。它看起來是這樣的：

組件：

showForm1 = true; 
showForm2 = true; 
showForm3 = false; 
showForm4 = false; 
showForm5 = false; 

@ViewChild('form1') form1: NgForm; 
@ViewChild('form2') form2: NgForm; 
@ViewChild('form3') form3: NgForm; 
@ViewChild('form4') form4: NgForm; 
@ViewChild('form5') form5: NgForm; 

shouldDisable() { 
    if (this.showForm1 && this.form1 && !this.form1.valid) { 
     return true; 
    } 
    if (this.showForm2 && this.form2 && !this.form2.valid) { 
     return true; 
    } 
    if (this.showForm3 && this.form3 && !this.form3.valid) { 
     return true; 
    } 
    if (this.showForm4 && this.form4 && !this.form4.valid) { 
     return true; 
    } 
    if (this.showForm5 && this.form5 && !this.form5.valid) { 
     return true; 
    } 
    return false; 
} 

模板：

<form #form1="ngForm" *ngIf="showForm1"></form> 
<form #form2="ngForm" *ngIf="showForm2"></form> 
<form #form3="ngForm" *ngIf="showForm3"></form> 
<form #form4="ngForm" *ngIf="showForm4"></form> 
<form #form5="ngForm" *ngIf="showForm5"></form> 


<button type="button" class="btn btn-primary" (click)="onSubmitBtnClick()" [disabled]="shouldDisable()">Save</button> 

希望有所幫助。