Как я могу передать свою форму по родительскому компоненту дочернему компоненту (MobileItems элементам аксессуаров)?

Question

Мобильные элементы являются родительским компонентом

AccessoryItems является дочерним компонентом

Мобильные элементы имеют реактивную angular форму и как я могу передать ее в другую форму дополнительному компоненту.

Мобильные элементы html и код компонента в один компонент и то же для компонента дополнительного элемента.

Answer 1

Вы можете сделать это легко, используя Внедрение зависимостей Angular

В дочернем компоненте AccessoriesItemsComponent просто используйте параметр viewProviders для вставки родительской формы в дочернее представление, например так:

@Component({
  /* ... */

  // In case of Template driven form
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
  // In case of Reactive form
  viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective } ]
})
export class AccessoriesItemsComponent {}

Answer 2

Вы можете передать всю форму от родителя (accessoryComponent) ребенку (mobileItemComponent) с помощью ввода, например:

parent.ts

constructor(fb: FormBuilder) {
  this.form = fb.group({
    login: ['', Validators.required],
    password: [null, Validators.required]
  });
}

parent. html

<child [parentForm]="form"></child>

child.ts

@Input() parentForm: FormGroup;

child. html

<form [formGroup]="parentForm">
   <!-- Here you can access form controls -->
</form>