如何在angular中获取form Array中的所有数据？

Question

我有这个输入数组，我想把它作为一个数组来发送，就像这个例子中的array exemple，我们如何使用input img来解决这个问题。

我有这样的输入

            <div>
                    <mat-form-field class='social-input lg:social-input-lg mt-8'>
                        <input  matInput type='text' placeholder="Instagram URL">
                    </mat-form-field>

                <mat-form-field class='social-input lg:social-input-lg mt-8'>
                        <input  matInput type='text' placeholder="facebook URL">
                    </mat-form-field>
                <mat-form-field class='social-input lg:social-input-lg'>
                              <input matInput type='text' placeholder="Linkedin URL">
                </mat-form-field>

            </div>

Answer 1

export class AppComponent {
  constructor(private fb: FormBuilder) {}

  socForm: FormGroup = this.fb.group({
    instagram: ["", []],
    facebook: ["", []],
    linkedin: ["", []]
  });

  ngOnInit() {
    this.socForm.valueChanges
      .pipe(
        map((formVal: { instagram: string; facebook: string; linkedin: string }) => {
          return Object.entries(formVal).reduce((accu, [fK, fV]) => {
            return [...accu, { type: fK, url: fV }];
          }, []);
        })
      )
      .subscribe(console.log);
  }
}

https://codesandbox.io/embed/focused-wilbur-f4hvm?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.ts&theme=light