gistfile1.txt

interface Movie {
  id: number;
  title: string;
}

@Component({
  selector: 'app-some-component-with-form',
  template: `...` // our form is here
})
export class SomeComponentWithForm {

  public form: FormGroup;
  public movies: Array<Movie>

  constructor(private formBuilder: FormBuilder){
    this.form = formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      age: ['', Validators.max(120)],
      favoriteMovies: [[]], /* 
                we'll have a multiselect dropdown 
                in our template to select favorite movies
                */
    });
  }
  
  public onSubmit(values){ 
    /* 
      'values' is actually a form value, which represents a user
      but imagine our API does not expect as to send a list of movie
      objects, just  a list of id-s, so we have to map the values
    */
    values.favouriteMovies = values.favouriteMovies.map((movie: Movie) => movie.id);
    // then we will send the user data to the server using some service
    
  }

}