Настройка данных FormGroup в MatDialog при нажатии кнопки не работает должным образом - PullRequest
Новая
       13

Настройка данных FormGroup в MatDialog при нажатии кнопки не работает должным образом

0 голосов
/ 28 февраля 2019

У меня есть MatTable.Как только я выбираю строку из таблицы, нажмите на кнопку редактирования, чтобы открыть MatDialog и заполните FormControls из данных выбранной строки.

Вот моя функция, чтобы открыть MatDialog при нажатии кнопкиполучилось.

openEditWindow(): void {
    const dialogRef = this.dialog.open(MatDialogFormComponent, {
      width: '600px',
      height: '500px',
      data: {
        formHeaderText: 'Edit File Template',
        editData: this.selectedRowForEdit
      }
    });
  }

Вот мой класс MatDialogFormComponent. 

export class MatDialogFormComponent implements OnInit {
// I removed some parts from the class for clarity. 
siteInsertForm = new FormGroup({
    templateName: new FormControl(),
    tagAddressFormat: new FormControl(),
    headerValueSeparator: new FormControl(),
    paramValuesCount: new FormControl(),
    paramValueSeparator: new FormControl()
  });

constructor(
    @Inject(MAT_DIALOG_DATA) public data: any) {

  }
}

В HTML-коде MatDialog мне удалось успешно изменить имя формы, используя данные, полученные из компонента MatTable.класс. 

<h1 mat-dialog-title>{{data.formHeaderText}}</h1>

Над кодом работает без каких-либо проблем.Затем я пытаюсь разобрать значения для формы редактирования. 

ngOnInit() {
this.siteInsertForm .patchValue({
    templateName: this.editData.templateName
});
}

Но приведенный выше код не работает.

Поэтому я попробовал что-то подобное, чтобы понять, что здесь происходит.

Я реализовал метод жизненного цикла AfterViewInit в классе MatDialogFormComponent. 

export class MatDialogFormComponent implements OnInit, AfterViewInit  {
// I removed some parts from the class for clarity. 

ngOnInit() {
this.siteInsertForm .patchValue({
    templateName: this.editData.templateName
});
}
ngAfterViewInit(): void {
    this.siteInsertForm.patchValue({
      templateName: this.data.editData.name
    });
  }

}

Затем он показалtemplateName в MatDialog и я получил ниже ошибку в консоли. 

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-form-field-should-float: false'. Current value: 'mat-form-field-should-float: true'.

Есть какие-нибудь мысли, чтобы решить эту проблему?Я использую Angular 6

1 Ответ

0 голосов
/ 28 февраля 2019

Вы должны использовать ngAfterViewChecked ловушку жизненного цикла 

ngAfterViewChecked() {
  this.siteInsertForm .patchValue({
      templateName: this.editData.templateName
  });
}

ngAfterViewChecked - ловушка жизненного цикла, которая вызывается после того, как изменение по умолчанию> детектор завершило проверку вида компонента на предмет изменений.

...