Синхронизация даты не работает должным образом с угловыми реактивными формами

Question

В моем проекте 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 file

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]
    });
  }
}

Пожалуйста, дайте мне знать, если я что-то упустил.

Answer 1

Я предполагаю, что вероятная причина этой проблемы должна быть связана с разбором строк. Ошибка «value.match не является функцией» должна быть вызвана тем, что тип значения не является строкой, поскольку match - это метод, принадлежащий прототипу String. Поэтому убедитесь, что в вашем приложении есть ошибка несоответствия типов.

Для справки, я подготовил образец с помощью Syncfusion Datepicker, используя формы Angular Reactive.

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

Если это не поможет, вы можете связаться с центром поддержки Syncfusion по ссылке ниже.

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

Answer 2

Есть несколько вещей, которые вы можете проверить,

• В app.module.ts убедитесь, что вы импортировали ReactiveFormsModule.
• В классе компонентов было объявлено registerForm и установлен тип на FormGroup (не обязательно, но давайте следовать хорошей практике)
• Переместить объявление registerForm внутрь ngOnInit (самая первая строка)

Я создал для вас пример StackBlitz - https://stackblitz.com/edit/angular7-synfunction-datepicker

В примере я установил [disabled]=false и [readonly]=false. Итак, я вижу всплывающее окно выбора даты.

Если вы изо всех сил пытаетесь установить значение средства выбора даты. Создайте функцию, установите значение внутри функции и вызовите ее откуда-нибудь. (т.е. NgOnInit, NgOnChange)

Надеюсь, это поможет.

Приветствия.