アングル2のクロスフィールドバリデーターをフォーム（フォームベース）で作成

Question

2つの日付フィールドを持つフォームがあり、開始日が終了日より前であることを検証したいと思います。かなりストレートです。 私は、テンプレートではなく反応的なフォームでフォームを実装することを選択しました。私はrc5を使用しています。私はテンプレートモデル（これは私が現時点では追求していない）のディレクティブを使ってたくさんのサンプルを見てきましたが、反応型フォームの例はもう機能していないようです。

あなたは以下のこの例では、仕事と思うだろうが、それは実際にはしません：Cross field validation in Angular2

searchlog.component.html

<form [formGroup]="logsearchForm" > 
<p-panel> 
    <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid"> 
    <div class="ui-grid-row ui-fluid"> 
     <div class="ui-grid-col-1">Search Logs</div> 
     <div class="ui-grid-col-4 ui-fluid"> 
     <input type="text" pInputText formControlName="searchString" placeholder="Enter text you want to search"/> 
     </div> 
     <div> 
     <button pButton type="submit" (ngSubmit) = "searchForLogs(logSearchForm.value, logSearchForm.valid)" label="Search" [disabled]="!logsearchForm.valid"></button> 
     </div> 
    </div> 
    <p-panel> 
     <div class="ui-grid-row ui-fluid"> 
     <div class="ui-grid-col-1">Applications:</div> 
     <div class="ui-grid-col-2"> 
      <p-dropdown [options]="applications" formControlName="selectedApp"> 
      </p-dropdown> 
     </div> 

     <div class="ui-grid-col-1">Users:</div> 
     <div class="ui-grid-col-2"> 
      <p-dropdown [options]="users" formControlName="selectedUser"></p-dropdown> 
     </div> 

     </div> 
     <div class="ui-grid-row ui-fluid"> 
     <div class="ui-grid-col-1">Start Time:</div> 
     <div class="ui-grid-col-2"> 
      <p-calendar formControlName="startDate" dateFormat="mm/dd/yy" timeFormat="HH:mm" timeControlType="select" 
         [horizontalTimeControls]="true"></p-calendar> 

     </div> 

     <div class="ui-grid-col-1">End Time</div> 
     <div class="ui-grid-col-2"> 
      <p-calendar formControlName="endDate" dateFormat="mm/dd/yy" timeFormat="HH:mm" timeControlType="select" 
         [horizontalTimeControls]="true">> 
      </p-calendar> 
     </div> 

     </div> 
    </p-panel> 
    </div> 
</p-panel> 
</form> 

searchlog.component.ts

.... initControls() { this.searchStringControl = new FormControl('', Validators.required); this.applicationsControl = new FormControl(''); this.usersControl = new FormControl(''); this.startDateControl = new FormControl(this.startDate); this.endDateControl = new FormControl(this.endDate); } .... ngOnInit() { this.startDate = this.getCurrentTimeAsString(); this.endDate = this.getTime24HoursAgoAsString(); this.initControls(); this.logsearchForm = this.fb.group({ 'searchString': this.searchStringControl, 'selectedApp': this.applicationsControl, 'selectedUser': this.usersControl, 'period': this.fb.group({ 'startDate': this.startDateControl, 'endDate': this.endDateControl }) }) } .... 

でも私は、次の取得新しいFormGroupにバリデータを追加することなく、コンソールのエラーです。

browser_adapter.js:84ORIGINAL EXCEPTION: Cannot find control with name: 'startDate' 

どのようにこれを達成するためのアイデアですか？あなたはこれが非常に一般的な問題だと思うでしょうが、私が見つけることができるのは、角2でもう動作しない答えです。

Answer 1

私にはうまくいくことがわかりました（ソースコードを掘り下げて）：

あなたは[formGroup] =「期間」に配置する必要があります：私はそれにもかかわらず、これはあなたのために遅すぎると考えているが、

this.logsearchForm = new FormGroup({ 
    'searchString': new FormControl('', Validators.required), 
    'selectedApp': new FormControl(''), 
    'selectedUser': new FormControl(''), 
    'startDate': new FormControl(this.startDate, Validators.required), 
    'endDate': new FormControl(this.endDate) 

}, {}, this.periodValidator); 

と（日付操作のためのmoment.jsを使用して）以下のバリデータ

periodValidator(formGroup:FormGroup) { 
    let stDt = moment(formGroup.value.startDate, "MM/DD/YYYY HH:mm"); 
    let endDt = moment(formGroup.value.endDate, "MM/DD/YYYY HH:mm"); 
    if (stDt < endDt) { 
     return null; 
    } 
    else { 
     return {'failedDateValidation': true} 
    } 

    }