Я работаю над обновлением большого AngularJS приложения до Angular 5+. Это означает использование новых Angular 5 компонентов в гибридном AngularJS приложении. Во многих случаях есть формы, вложенные в другие формы. Старый код AngularJS имеет родительскую форму, подобную этой:
export default function PersonDirective() {
return {
restrict: "E",
template: `
<div ng-form="personForm">
<input type="text" name="surname" ng-model="person.surname" ng-required="true">
<address-form address="person.homeAddress"></address-form>
</div>`,
replace: true,
scope: {
person: "="
}
};
}
, а дочерняя форма похожа:
export default function AddressDirective() {
return {
restrict: "E",
template: `
<div ng-form="addressForm">
<input type="text" name="firstLine" ng-model="address.firstLine" ng-required="true">
<input type="text" name="city" ng-model="address.city" ng-required="true">
</div>`,
replace: true,
scope: {
address: "="
}
};
}
В результате создается FormController для PersonDirective, который имеет адресная форма в виде вложенного поля FormController с именем addressForm
. Ошибки проверки в подчиненной форме влияют на допустимость родительской формы.
Я преобразовал форму адреса в компонент Angular 5, заменив директивы AngularJS ng-form
и ng-required
на стандарт HTML:
@Component({
selector: 'address-form',
template: `
<div>
<form #addressForm="ngForm">
<input type="text" name="firstLine" [(ngModel)]="address.firstLine" required>
<input type="text" name="city" [(ngModel)]="address.city" required>
</div>`
})
export class AddressFormComponent {
@Input() address: any;
}
Новый компонент понижен в index.ts
для использования в AngularJS:
angular.module('common')
.directive("ng2AddressForm", downgradeComponent({component: AddressFormComponent}));
, а шаблон PersonDirective, измененный для использования новый компонент:
<div ng-form="personForm">
<input type="text" name="surname" ng-model="person.surname" ng-required="true">
<ng2-address-form address="person.homeAddress"></ng2-address-form>
</div>
Новый компонент отображается и проверяется в соответствии с ожиданиями. Проблема заключается в том, что оно больше не отображается как поле в родительской форме, а его действительность и состояние больше не распространяются на родительский. Невозможно конвертировать все формы одновременно. Кто-нибудь может предложить решение?