Создание formGroupName динамически не работает - угловые реактивные формы

Question

Я пытаюсь создать ReactiveForm в Angular с этими данными heirarchy:

-company
  -name
  -city
-employee1
  -name
  -planet
-employee2
  -name
  -planet

Я создал компонент CompanyDetailsComponent и другой EmployeeDetailsComponent

Я хочу использовать EmployeeDetailsComponent с formGroupNames employee1 & employee2

Вот код стекаблица

На самом деле я хочу, чтобы это работало на переменное число сотрудников. Мне нужно, чтобы структура оставалась плоской (я не могу использовать массив сотрудников, в этом случае я бы использовал FormArray вот так)

Таким образом, чтобы достичь этой плоской иерархической структуры, я сначала пытался сделать это для 2 сотрудников.

Любая помощь будет принята с благодарностью

Заранее спасибо!

Answer 1

Я думаю, что вы с тех пор отредактировали его по совету Юрзуи, но я посмотрел и исправил небольшую ошибку, которая мешала ему работать, и вот ссылка:

Stackblitz

У вас были квадратные скобки вокруг атрибутов, которые не извлекали их значения из компонента. Например, я изменил [jsonname]="employee2" в jsonname="employee2",

Надеюсь, это работает так, как задумано сейчас.

Answer 2

Есть несколько шагов, чтобы заставить это работать:

Измените шаблон формы следующим образом:

<form [formGroup]="form">
  <app-company-details></app-company-details>
  <app-employee-details jsonname="employee1"></app-employee-details>
  <app-employee-details jsonname="employee2"></app-employee-details>
</form>

Создать группу вложенных форм на основе предоставленных jsonname строка:

работник-details.component.ts

@Component({
  selector: 'app-employee-details',
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ],
  ...
})
export class EmployeeDetailsComponent implements OnInit {
  @Input() jsonname;

  constructor(private fb: FormBuilder, private fgd: FormGroupDirective) { }

  ngOnInit() {
    const group = this.fb.group({
      name: new FormControl(),
      planet: new FormControl()
    });

    this.fgd.form.addControl(this.jsonname, group);
  }
}

работник-details.component.html

<div [formGroupName]="jsonname">
  ...
</div>

Пример Stackblitz

Answer 3

Проблема с angular 9 не позволяет использовать номер как formGroupName. Это связано со строгой проверкой типов в angular. У меня сработало решение ниже.

Нерабочий код:

      <ng-container *ngFor="let configurationCtrl of configurationForm.get('configurations').value;
let i = index" [formGroupName]="i">

Рабочий код:

      <ng-container *ngFor="let configurationCtrl of configurationForm.get('configurations')['controls'];
let i = index" [formGroupName]="i">

Примечание. Я заменил значение элементами управления.