Click add button does not show the data

After I input the data and click add button, it shows blank data on the list instead of showing the data on the list. there is an error that says: expected 0 argument but got 3. I created a const newMovie so it can pass the input value and added it to the .addMovie(newMovie). It shows the data though in the console but does not show the data in the browser. Any help? Thank you.

      onSubmit(formData: NgForm) {
                console.log(formData);
                  const value = formData.value;
                // having problem in here,  it says expected 0 argument but got 3
                 const newMovie = new Movies(value.title, value.actors, value.releasedDate);
                 this.moviesService.addMovie(newMovie);
                }

            //moviesService
             movies: Movies[] = [
                  {
                        title: 'Mr & Mrs Smith',
                        actors: ['Brad Pitt',  ' Angelina Jolie'],
                        releasedDate: '2010-03-18'
                    },
                    {
                        title: 'Titanic',
                        actors: ['Leonardo deCaprio', ' Cate Winslet'],
                        releasedDate: '2008-03-20'
                    }
                ];


                moviesChanged = new BehaviorSubject<Movies[]>(this.movies);

                getMovies(): Movies[] {
                    return this.movies.slice();
                }

                addMovie(movie: Movies) {
                    this.movies.push(movie);
                    this.moviesChanged.next(this.movies.slice());
                }
            }

      // movie-list.component
        export class MovieListsComponent implements OnInit {
        movies: Movies[];

        constructor(private moviesService: MoviesService) { }

          ngOnInit() {
             this.movies = this.moviesService.getMovies();
            this.moviesService.moviesChanged.subscribe(
              (movies: Movies[]) => {
            this.movies = movies;
              }
            );
          }




            movies.component.html
             <h3 [ngClass] = "{textColor: changeColor}">{{message}}</h3>
              <div class="row">
                <div class="col-xs-12">
                  <form (ngSubmit)="onSubmit(f)" #f= "ngForm">
                    <div class="row">
                        <div class="col-xs-12">
                    <div class="form-group">
                      <label for="title">Title</label>
                      <input type="text" class="form-control" id="title"
                      ngModel
                      name="title">
                    </div>
                        </div>
                  </div>
                  <div class="row">
                    <div class="col-xs-12">
                      <div class="form-group" >
                        <label for="actors">Actors</label>
                        <input type="text" class="form-control" id="actors"
                        ngModel
                        name="actors">
                      </div>
                    </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                        <div class="form-group">
                          <label for="releasedDate">Released Date</label>
                          <input type="text" class="form-control" id="releasedDate"
                          ngModel
                          name="releasedDate">
                        </div>
                        </div>
                      </div>
                      <button class= "btn btn-primary" type="submit">Add</button>
                  </form>


                </div>
              </div>

    // movie-lists.component 
<div class="container">
  <div class="col-xs-12">    
      <div class="row">
          <div class="col-xs-6">           
              <app-movies  message = "Add your favourite movie: " ></app-movies >
          </div>
        </div> 
        <div class="row">
            <div class="col-xs-6"  >
              <ul  class="list-group"  *ngFor= "let movie of moviesService.moviesChanged | async" >
                <div>
                   <h3> Title: {{movie.title}}</h3> 
                </div>
                <li class="list-group-item"  >
                   <strong>Actors: </strong> {{ movie.actors }}
                   </li>
                   <li class="list-group-item" >
                      <strong>Released Date: </strong> {{movie.releasedDate}}
                     </li>
              </ul>
            </div>
          </div>         
  </div>
</div> 

Welcome to stackoverflow!

This line of code:

const newMovie = new Movies(value.title, value.actors, value.releasedDate);

Is calling a parameterized constructor in the Movie class, passing in three values.

What does your Movies class look like? Does it have a parameterized constructor with 3 parameters? The error message is suggesting that you don't.

Try instead using this:

const newMovie = new Movies();
newMovie.title = value.title;
newMovie.actors = value.actors;
newMovie.releaseDate = value.releaseDate;

It is constructing the movie with no parameters and then setting the properties individually.