Как вложить форму Angular 2+ в форму AngularJS? - PullRequest
0 голосов
/ 23 апреля 2020

Я работаю над обновлением большого 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>

Новый компонент отображается и проверяется в соответствии с ожиданиями. Проблема заключается в том, что оно больше не отображается как поле в родительской форме, а его действительность и состояние больше не распространяются на родительский. Невозможно конвертировать все формы одновременно. Кто-нибудь может предложить решение?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...