htmlページで複数のフォームを検証する方法は？

Question

私はhtmlページに5を持つhtmlページを持っています。検証が失敗した場合は、送信ボタンを無効にしたい私は2つのフォームが常に表示され、3つのフォームが隠されています。これらの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）を持っている必要があります。 宣言フォームとして：だから最後にあなたが（任意のネストされたフォームグループからの任意のフィールドが無効である場合、それはfalseになります）検証ステータスを取得するには、親フォームを使用することができ、ボタンを提出するための

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: '', 
    }) 
}); 

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

希望。