Syncfusion 日期选择器不适用于角度反应形式答案

【问题标题】：Syncfusion date-picker doesn't work properly with angular reactive formsSyncfusion 日期选择器不适用于角度反应形式
【发布时间】：2019-06-16 11:14:48
【问题描述】：

在我的 Angular 7.0 项目中，我使用两个 Syncfusion 日期选择器来显示“创建者”日期和“修改者”日期。当我使用带有“[(ngModel)]”的模板驱动方法时，控件可以在完全相同的数据上正常工作。

当我在反应式表单中使用同一页面上的相同控件时，它不起作用。它只是在控制台上给我一个错误（value.match 不是一个函数）并只显示两个文本框而不是通常的日期控件。正如您在 HTML 文件中看到的那样，我将学校对象转换为 JSON 并同时查看日期数字的值。我也没有看到任何不兼容的地方。

.HTML 文件

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="pt-2">
        <div class="row">
          <div class="col-10">
            <div class="form-group">
              <div class="row">
                <div class="col-4">
                  <span>Created date</span>
                </div>
                <div class="col-6">
                  <!-- This is doesn't work -->
                  <ejs-datepicker #createdDate class="syncfusion-dtp" placeholder='Enter date' format="dd-MM-yyyyy" aria-label="Created date"
                                  [readonly]="true" [disabled]="true"
                                  formControlName="createdOn" name="Created On"></ejs-datepicker>
                </div>
              </div>
            </div>
          </div>
        </div>

        <button type="submit" class="float-right ml-1 btn btn-info " [disabled]="!registerForm.valid">Submit</button>
      </form>

      <!-- This works -->
      <ejs-datepicker class="syncfusion-dtp" placeholder='Enter date' format="dd-MM-yyyyy" aria-label="Modified date"
                      [readonly]="true" [disabled]="true"
                      [(ngModel)]="school.modifiedOn" name="Modified On"></ejs-datepicker>

.ts 文件

export class ListItemViewEditComponent implements OnInit, OnChanges {
  @Output() notifyParentOnUpdate: EventEmitter<any> = new EventEmitter<any>();
  @Input() schoolObject: School;
  school = new School();
  schoolNumber: number;
  @ViewChild('createdDate') createdDate: DatePicker;
  @ViewChild('modifiedDate') modifiedDate: DatePicker;

  constructor(private fb: FormBuilder, private route: ActivatedRoute, private schoolsService: SchoolsService) { }

  registerForm = this.fb.group({
    id: [''],
    schoolNumber: ['', Validators.required],
    schoolName: [''],
    description: [''],
    createdOn: [''],
    createdBy: [''],
    modifiedOn: [''],
    modifiedBy: ['']
  });


  ngOnChanges() {
    this.school = this.schoolObject;
    this.registerForm.setValue({
      id: [this.school.id],
      schoolNumber: [this.school.schoolNumber],
      schoolName: [this.school.schoolName],
      description: [this.school.description],
      createdOn: [this.school.createdOn],
      createdBy: [this.school.createdBy],
      modifiedOn: [this.school.modifiedOn],
      modifiedBy: [this.school.modifiedBy]
    });
  }
}

如果我遗漏了什么，请告诉我。

【问题讨论】：

标签： datepicker angular-reactive-forms angular7 syncfusion

【解决方案1】：

您可以检查几件事，

在 app.module.ts 中确保您已导入 ReactiveFormsModule。
在组件类中，已声明 registerForm 并将类型设置为 FormGroup（不是必需的，但让我们遵循良好做法）
将registerForm 声明移到ngOnInit 中（第一行）

我为您创建了一个 StackBlitz 示例 - https://stackblitz.com/edit/angular7-synfunction-datepicker

在示例中，我设置了[disabled]=false 和[readonly]=false。所以，我可以看到实际的日期选择器弹出窗口。

如果您正在努力设置日期选择器的值。创建一个函数并在函数内部设置值并从某个地方调用它。（即 NgOnInit、NgOnChange）

希望这会有所帮助。

干杯。

【讨论】：

【解决方案2】：

我猜这个问题的可能原因一定与字符串解析有关。错误“value.match is not a function”一定是因为value的类型不是字符串，因为match是属于String原型的方法。因此，请确保您的应用程序中是否存在类型不匹配错误。

为了您的参考，我使用 Angular Reactive 表单使用 Syncfusion Datepicker 准备了一个示例。

https://stackblitz.com/edit/angular-eix8bh-z25gns?file=reactiveform.component.ts

如果这没有帮助，您可以通过以下链接联系 Syncfusion 支持中心。

https://www.syncfusion.com/support/directtrac/incidents

【讨论】：