convert array of objects to formArray in angular reactive form

 @Input() externalLinksData: IExternalLinksInfo[] = [ // formArray
    {                                 // formGroup
      link: 'https://www.google.com', // formControl
      title: 'www.google.com',        // formControl
      id: '1q'                        // formControl
    },
    {                                  // formGroup
      link: 'https://www.walla.co.il', // formControl
      title: 'walla',                  // formControl
      id: '2w'                         // formControl
    },
    {                                 // formGroup
      link: 'https://www.ynet.co.il', // formControl
      title: 'ynet',                  // formControl
      id: '3e'                        // formControl
    },
    {                                 // formGroup
      link: 'https://www.ynet.co.il', // formControl
      title: 'ynet!!',                // formControl
      id: '4r'                        // formControl
    },
  ];

export class PopupExternalLinksComponent implements OnInit {
  @Input() externalLinksData: IExternalLinksInfo[] = [ // formArray
    {                                 // formGroup
      link: 'https://www.google.com', // formControl
      title: 'www.google.com',        // formControl
      id: '1q'                        // formControl
    },
    {                                  // formGroup
      link: 'https://www.walla.co.il', // formControl
      title: 'walla',                  // formControl
      id: '2w'                         // formControl
    },
    {                                 // formGroup
      link: 'https://www.ynet.co.il', // formControl
      title: 'ynet',                  // formControl
      id: '3e'                        // formControl
    },
    {                                 // formGroup
      link: 'https://www.ynet.co.il', // formControl
      title: 'ynet!!',                // formControl
      id: '4r'                        // formControl
    },
  ];
  private newExternalLinksData: IExternalLinksInfo[] = [];
  private delExternalLinksData: IExternalLinksInfo[] = [];
  @Output() closeEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() saveEmitter: EventEmitter<IExternalLinksInfo[]> = new EventEmitter<IExternalLinksInfo[]>();
  @Output() deletedLinksEmitter: EventEmitter<IExternalLinksInfo[]> = new EventEmitter<IExternalLinksInfo[]>();
  form: FormGroup = {} as FormGroup;
  get links(): FormArray {
    const linksData = this.form.get("links") as FormArray;
    return linksData;
  }
  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.newExternalLinksData = [...this.externalLinksData];
    this.form = new FormGroup({
      links: this.fb.array(this.newExternalLinksData.map(item => {
        return this.fb.group({
          title: new FormControl(item.title, { validators: [Validators.required] }),
          link: new FormControl(item.link, { validators: [Validators.required] }),
          id: new FormControl(item.id),
        });
      })),
    });
  }
  onAdd() {
    const linksData = this.form.get("links") as FormArray;
    linksData.push(new FormGroup({
      title: new FormControl('', { validators: [Validators.required] }),
      link: new FormControl('', { validators: [Validators.required] }),
      id: new FormControl(''),
    }))
  }
  onDelete(idx: number) {
    const linksData = this.form.get("links") as FormArray;
    if (linksData.controls[idx].value['id'] !== '') {
      this.delExternalLinksData.push(linksData.controls[idx].value)
    }
    linksData.removeAt(idx);
  }
  onCancel() {
    this.closeEmitter.emit(false);
  }
  onSave() {
    if (this.form.valid) {
      this.saveEmitter.emit(this.form.value);
      if (this.delExternalLinksData.length > 0) {
        this.deletedLinksEmitter.emit(this.delExternalLinksData);
      }
    }
  }

}

 <main class="main">
        <form [formGroup]="form">
            <ul class="links-list" formArrayName="links">
                <li class="links-item" *ngFor="let linkInfo of links.controls;index as idx">
                    <div [formGroupName]="idx">
                        <label class="label">
                            כותרת:
                            <input type="text" class="normal-input" formControlName="title">
                        </label>
                        <label class="label">
                            קישור:
                            <input type="text" class="normal-input" formControlName="link">
                        </label>
                        <button class="links-delete" type="button" aria-label="מחק"
                            (click)="onDelete(idx)">מחק</button>
                    </div>
                </li>
                <li class="add-more"><button type="button" (click)="onAdd()">הוספה</button></li>
            </ul>
            <div class="sub-footer">
                <div class="action-wrapper">
                    <button class="submit" type="button" (click)="onSave()" [disabled]="!form.valid">אישור</button>
                    <button class="cancel" type="button" (click)="onCancel()">ביטול</button>
                </div>
            </div>
        </form>
    </main>