Angular Форма «Реактивный материал» - динамически добавлять неограниченное количество групп форм в массив форм с помощью фильтра автозаполнения материалов.

Question

Angular CLI: 8.3.12

Я пытаюсь создать форму, в которой пользователь может добавить неограниченное количество FormGroups в пределах FormArray. FormGroup - это объект с несколькими FormControl, и один из них использует mat-autocomplete, потому что это длинный список.

skillList: Skill[] = [new Skill('test skill','1 year'),new Skill('test skill 2','2 years')]
filteredSkills: Observable<Skill[]>;  

extraSkills: FormArray;
  testFrom = this.fb.group({
  name: [''],
  skills: this.fb.array([])
});

ngOnInit(){
  this.filteredSkills= this.testFrom.get("skills").valueChanges
  .pipe(
    startWith(''),
    map<string, Skill[]>(value => this.filterSkills(value))
  );
}

private filterSkills(value: string): Skill[] {
  const filterValue = value.toLowerCase();

  return this.skillList.sort().filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
}

Проблема 1: не удалось создать форму, поскольку я всегда сталкивался с проблемами, например, *ngFor не выполняет итерации по элементам.

Я пытался <div formArrayName="extraSkills" *ngFor="let extraSkill of extraSkills?.value; let i = index;"> - Делает не хотите перебирать вновь добавленные элементы.

и <div formArrayName="extraSkills" *ngFor="let extraSkill of testFrom.get("skills").controls; let i = index;"> - выдает ошибку во вновь добавленной форме, говоря Cannot find control with path: 'extraSkills -> name', и другую ошибку для свойства time.

Проблема 2: Angular Material автозаполнение должно иметь различные значения для работы. [matAutocomplete]="i" и #i. Как это сделать в HTML?

Выпуск 3: filteredSkills должно быть уникальным для каждого вновь добавленного навыка. Стоит ли хранить его в классе умений?

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

Ссылка StackBlitz