Question

我有一个有两个日期字段的表单，我想验证开始日期早于结束日期。挺直的。我选择使用反应式表单而不是模板来实现表单。我正在使用rc5。我经常搜索并查看了模板模型指令的示例（我现在选择不再采用），但我看到的反应形式示例似乎不再起作用了。< / p>

你会认为下面这个例子可行，但实际上并没有：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
      })
    })

  }

....




Without even adding a validator to the new FormGroup I get the following error in console.

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

知道怎么做到这一点？您会认为这是一个非常常见的问题，但我能找到的只是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}
    }

  }

反应（基于模型）在角度2中形成交叉场验证器

1 个答案: