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

Я пытаюсь создать ReactiveForm в Angular с этой иерархией данных:

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

Я создал компонент CompanyDetailsComponent и еще один EmployeeDetailsComponent

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

Вот код stackblitz

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

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

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

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


angular angular-reactive-forms angular2-forms formgroups
person penduDev    schedule 05.01.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Stackblitz

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

Надеюсь, теперь все работает так, как задумано.

person Jesse    schedule 05.01.2019

arrow_upward
2
arrow_downward

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

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

<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 строки:

employee-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);
  }
}

employee-details.component.html

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

Пример Stackblitz

person yurzui    schedule 05.01.2019