Angular 2フォームでコレクションを検証する方法（リストは空のルールであってはなりません）？

Question

だから私は実際にバリデーションを使ってフォームを構築しています。

• これは、バックエンド・アプリケーション、ユーザーが資格情報を使用して、フォーム、電子メールアドレスのリストとチェックサム値のリストを提出する必要が
• がある：アイデアは以下の通りです。

私は何を検証することは以下の通りです：

• ユーザー名とパスワードは、電子メールアドレスの
• リストが空ではない（これは動作するようになった）/ブランクではない存在
• チェックサム値のリストが空ではありません

問題

問題は、リストを検証する方法がわかりません。私はPrimeNGのPickListとDataTableコンポーネントを使用しています。私はまた現在テンプレート駆動型を使用しています（答えはテンプレート駆動である必要はありません）。これは、それぞれのセクションのためのHTMLコードです：

<p-pickList [source]="artifactoryList" [target]="artifactorySelectedList" [responsive]="true" [showSourceControls]="false" 
          [showTargetControls]="false" (onMoveToTarget)="addChecksums($event)" (onMovetoSource)="removeChecksums($event)"> 
... SOME TEMPLATING THAT GOES HERE BUT CAN'T SHOW ON STACKOVERFLOW PROPERLY ... 
</p-pickList> 

のDataTable

選択リスト

    <p-dataTable var="contact" [value]="model.contactList"> 
         <p-column> 
          <template let-email="rowData" pTemplate type="body"> 
           <span>{{email}}</span> 
          </template> 
         </p-column> 
         <p-column styleClass="col-button"> 
          <template let-email="rowData" pTemplate type="body"> 
           <input type="button" class="btn btn-danger" value="Delete" (click)="removeContact(email)"> 
          </template> 
         </p-column> 
        </p-dataTable> 

現在の回避策現在回避策は何もしないことである

。したがって、これら2つのコンポーネントには検証はありません。どこでも答えを確認しましたが、すべての例ではinputのhtmlタグしか使われていないようです。私はngFormオブジェクトの値プロパティにこれらのリストの値を追加する必要が

• ：

  私の現在の考え方のようなものです。だから私は何かを明らかに行方不明ですどちらか

  • は
  私が不足しているインターフェイスを実装することを意図しています

質問

の質問はどのようにある（現在はOnInitを実装します） PicklistとDataTableの両方のバッキング配列を角度2の方法で検証しますか？

Answer 1

カスタムリスト入力用のカスタムバリデータを作成します。

カスタムバリデータ：

function requiredList(fromControl) { 
    return fromControl.value && fromControl.value.length ? null : { 
    requiredList: { 
     valid: false 
    } 
    }; 
} 

モデルベースのアプローチでカスタムバリデータを使用してコンポーネント：

import { FormBuilder } from '@angular/forms'; 

export class MyFormComponent { 
    constructor(formBuilder: FormBuilder) { 
     this.form = formBuilder.group({emailList: [[], requiredList]}) 
     … 

またはテンプレートの使用で

this.form.controls.emailList.setValidators([requiredList]); 

と後で設定リストを値として扱うカスタムコンポーネント

<email-list formControlName="emailList"></email-list>