angular 2 中的反应式（基于模型）表单交叉字段验证器

Question

我有一个包含两个日期字段的表单，我想验证开始日期是否早于结束日期。非常简单。我选择使用响应式表单而不是模板来实现表单。我正在使用 rc5。我搜索了很多并看到了带有模板模型指令的示例（我目前选择不去追求）但是我看到的反应式表单的示例似乎不再有效。

您可能认为下面的示例可行，但实际上行不通：

searchlog.component.html </p> <pre><code><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>

</p> <p>searchlog.component.ts</p> <p><code></p> <pre>.... 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'

知道如何实现吗？你会认为这是一个非常普遍的问题，但我能找到的只是在 Angular 2.

中不再有效的答案

Answer 1

我发现对我有用的一种方法（查看源代码）是：

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

  }

angular 2 中的反应式（基于模型）表单交叉字段验证器

reactive (model based) forms cross field validator in angular 2

angularjs

forms

validation

reactive