Блог

Я обновил свой угловой проект с 7 до 9. Обновление нарушило мою пользовательскую директиву, поскольку, как представляется, жизненный цикл объектов отличается.

Моя первоначальная проблема заключается в том, что мне нужно получить доступ к элементам управления формами, уникальным образом основанным на загружаемых данных. Например, пользователь загружает 11 записей и изменяет имя на записи 8. Мне нужно иметь доступ к элементу управления формой для 8-й записи.

Я нашел решение из учебника некоторое время назад. (У меня больше нет этой ссылки.) Он использует пользовательскую директиву для добавления элементов управления формой при изменении данных. Имена элементов управления формой имеют уникальное имя, например «record8» для 8-й записи. (Мои фактические номера не являются последовательными.) Он обращается к FormGroupDirective.form, чтобы получить группу форм, содержащую элементы управления. В более новых версиях Angular свойство формы на данный момент равно нулю.

Мне нужно либо исправить свой код, либо найти совершенно новое решение для достижения той же цели.

Вот общий взгляд на мое текущее решение:

мой.компонент.ts

 ngOnInit{
  // Build an empty array for the form controls
  this.myForm = this.formBuilder.group({
    records: this.formBuilder.group([])
  });
}
 

my.component.html

 <form [connectMyForm]="myRecords$ | async" ...>
  ...
</form>
 

myconnect.директива.ts

 @Directive({
  selector: '[connectMyForm]'
})

export class MyConnectDirective {
    constructor(private formGroupDirective: FormGroupDirective) { }

    @Input('connectMyForm')
    set data(values: any) {
        // Add uniquely named form controls based on the data that is passed in.
        // PROBLEM: this.formGroupDirective.form is now null at this point.
        let recordGroup = this.formGroupDirective.form.get('records') as FormGroup; //FAIL form is null
        recordGroup.controls = {}; //Remove anything existing.

        for (let value of values) {
            // Add form control with unique name.
        }
    }
}
 

Любая помощь будет очень признательна.

В Angular 9 вы можете убедиться, что привязка компонента выполняется после FormGroupDirective привязки, поместив [formGroup] ее перед привязкой директивы:

 <form [formGroup]="myForm" [connectMyForm]="myRecords$ | async">
      ^^^^^^^^^^^^^^
       goes first
 

Пример запуска Ng