Angular 15 — FormsBuilder — TypeError: невозможно прочитать свойства неопределенного (чтение «группы»)
Я перенес свой проект на Angular 15 и больше не могу напрямую использовать FormsBuilder для реактивных форм. Я получаю неопределенное исключение:
ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'group')
TypeError: Cannot read properties of undefined (reading 'group')
Это мой код:
settingsForm = this.formBuilder.group({
locations: ''
});
constructor(private formBuilder: FormBuilder) {}
Раньше все работало нормально. Работающее решение — через хук жизненного цикла NgOnInit. Однако это был бы нерекомендуемый способ, и я теряю свою неявную типизацию.
Что может быть причиной?
Если я сброшу все в NgOnInit, все сработает. Я не знаю, что еще может быть причиной проблемы.
У меня теперь работает прямое создание экземпляров: settingsForm = new FormBuilder().nonNullable.group({...}); - Однако странно, почему не работает DI и конструктор. Я тоже не смог воспроизвести ошибку.
Ответы 1
Причиной вашей проблемы является переключатель tsconfig useDefineForClassFields.
Когда это включено, классы инициализируются, как определено в стандарте ecma, где порядок инициализации немного отличается от машинописного текста. См. также примечания к выпуску TS 3.7
Итак, когда это включено, поле settingsForm инициализируется перед сокращением конструктора.
Из моего исследования я полагаю, что это будет поведение по умолчанию в будущих версиях машинописного текста, поэтому вы должны соответствующим образом реорганизовать свой код.
// useDefineForClassFields = true
"use strict";
class Test {
foo;
bar = this.foo;
constructor(foo) {
this.foo = foo;
console.info(this.foo, this.bar);
}
}
const x = new Test('abc');
// useDefineForClassFields = false
"use strict";
class Test {
constructor(foo) {
this.foo = foo;
this.bar = this.foo;
console.info(this.foo, this.bar);
}
}
const x = new Test('abc');
Сгенерировано на TS Playground
Интересный! Просто странно, что я не могу воспроизвести его с новым приложением Angular 15, и проблема возникла только при переносе моего приложения Angular 14 -> 15. Я изменил свой код и оставил его как есть. Я по-прежнему буду рад проверить вашу конфигурацию TS позже, чтобы убедиться, что проблема в ней.
Вы уверены, что это место вашей ошибки? Вот Stackblitz этой работы в Angular 15.