角度2を使った動的フォーム検証

Question

私は、角度2アプリケーションに取り組んでおり、サブセクションテンプレートで動的に（jsonを使って）フォームフィールドを作成しています。
フォームが無効な場合、送信ボタンを無効にしたいと考えました。

<h1>Form Validation</h1> 
<div > 
<form #loginForm="ngForm"> 
    <subsection [question]="fieldsData"></subsection> 
    <button type="submit" [disabled]="!loginForm.form.valid">Submit</button> 
</form> 
</div> 

サブセクションそれは

<div *ngFor="let data of question"> 
<label> {{data.displayName}}</label> 
<input type="data.dataType" name="data.fieldId" [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel"> 
<div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger"> 
    <div [hidden]="!name.errors.required"> 
     Name is required 
    </div>  
</div> 
<br><br> 

を次のように私はすべての必須フィールドがplunkerリンクを作成して

を満たされた後、送信ボタンを要件を有効にする必要があります持っていますHere

Answer 1

あなたのplunkrに基づいて、とにかくモデルのフォームフィールド（fieldsData配列はAppComponentで定義されています）を定義しているので、あなたが記述したテンプレート駆動型アプローチではなく、reactive formを使用する方が良いでしょう。

loginForm.valueをデバッグすると、名前のフィールドが表示されないことがわかります。サブコンポーネントのフィールドのうち、inputのフィールドが広いフォームに参加していないため、フォーム - フォームを送信すると、フォームにはこれらのフィールドに入力されたデータは含まれません。

代わりにControlValueAccessorをhereのように実装することによってサブコンポーネントをフォームに参加させることもできますが、これにより複雑さが増します。

より単純な方法は、（1）反応性のあるフォームを使用するか、（2）ネストされたサブセクションコンポーネントをまったく使用しないことです。

<form #loginForm="ngForm"> 

    <div *ngFor="let data of fieldsData"> 
     <label> {{data.displayName}}</label> 
     <input type="data.dataType" [(ngModel)]="data.fieldValue" required  [name]="data.fieldId" #name="ngModel"> 
     <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger"> 
      <div [hidden]="!name.errors.required"> 
       {{data.displayName}} is required 
      </div>  
     </div> 
     </div> 
    <button type="submit" [disabled]="!loginForm.form.valid">Submit</button> 

    Form contains: {{loginForm.value | json }} 

</form> 

Answer 2

question.component.html

<form #loginForm="ngForm"> 
<div *ngFor="let data of question"> 
    <label> {{data.displayName}}</label> 
    <input type="data.dataType" [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel"> 
    <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger"> 
     <div [hidden]="!name.errors.required"> 
      {{data.displayName}} is required 
     </div>  
    </div> 
    <br><br> 
</div> 
<button type="submit" [disabled]="loginForm.invalid">Submit</button> 
</form> 

上記あなたは* ngIfを使用してアクティブにするために、上記を使用することができます送信ボタンを無効にします。上記のものを！loginForm.validとして使用することもできます。 GabrieleB・デビッドフォームフィールド@

app.component.html

<h1>Form Validation</h1> 
    <subsection [question]="fieldsData"></subsection>