Change the value of an input in html using MEAN stack

I'm using MEAN stack for the first time and I'm having a problem updating the value of inputs in a form. I want to click a button and put some values in the inputs. The problem is that even if I do change the value of the input doing: document.getElementById('name').value =name; The value changes but the form doesn't detect the change and can't send the data.

Here is the code of the form:

<form #placeForm="ngForm" (ngSubmit)="addPlace(placeForm)" >
            <div class="row">
                <div class="input-field col s4">
                    <input type="text" name="name" id="name" #name="ngModel"  [(ngModel)]="placeService.selectedPlace.name" >
                    <label for="name">Nombre del establecimiento</label>
                  </div>      
              <div class="input-field col s4">
                <input type="text" name="city" id="locality" #city="ngModel" [(ngModel)]="placeService.selectedPlace.city">
                  <label for="city">Ciudad</label>
              </div>
                <div class="input-field col s8">
                    <button class="waves-effect waves-light btn right"  onclick=" M.toast({html: 'Información introducida en la BD', classes: 'rounded green'});"><i class="material-icons right">add</i>Guardar</button>

                </div>

            </div>
          </form>

Here is the class placeService:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Place } from '../models/place';

@Injectable({
  providedIn: 'root'
})
export class PlaceService {
  selectedPlace: Place;
  places: Place[];
  readonly URL_API = 'http://localhost:3000/places';

  constructor(private http: HttpClient) { 
    this.selectedPlace= new Place();
  }

  getPlaces() {
    return this.http.get(this.URL_API);
    //.subscribe()
  }
}