Home > Mobile >  How to get all data in form Array in angular?
How to get all data in form Array in angular?

Time:10-29

I have this input input img and I want to send it like an array as in this exemple array exemple How we can use Form array to solve this.

I have this inputs

            <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>

CodePudding user response:

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=/src/app/app.component.ts&theme=light

  • Related