formularios con ReactiveForms

Una buena forma de trabajar los formularios es con los ReactiveForms
primero importamos en app.module ReactiveFormsModule

import {FormsModule, ReactiveFormsModule} from"@angular/forms";

imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
]

en le html creamos una etiqueta form con (ngSubmit) y una referencia de tipo ngForm #form=“ngForm”. a cada input se le coloca un ngModel y un name
al ngSubmit le colocamos que funcion queremos usar y le pasamos la referencia por parametro

<form  (ngSubmit)="onSubmit(form)" #form="ngForm">
      <input  class="form-control" placeholder="nombre"  ngModel name="nombre">
      <textarea class="form-control" placeholder="descripcion" ngModel name="descripcion"></textarea>
      <input type="text" placeholder="plan"class="form-control" ngModel name="plan">
      <h3>Datos de Dirección</h3><input type="text" placeholder="direccion"class="form-control" ngModel name="direccion">
      <input type="text" placeholder="ciudad"class="form-control" ngModel name="ciudad">
      <input type="text" placeholder="pais"class="form-control" ngModel name="pais">
      <div class="buttons">
        <button type="submit"class="btn btn-enviar "type="submit">Enviar</button>
        <button class="btn btn-cancelar" (click)="cancelar()" >Cancelar</button>
      </div>
    </form>

del lado de typeScript importamos ngForm y creamos la funcion que va a recibir el formulario y asignamos los valores que llegaron por parametros a constantes y finalmente creamos el lugar

import { NgForm  } from '@angular/forms';

onSubmit(form: NgForm){
      const { nombre, descripcion, direccion, plan, ciudad, pais  } = form.value;
      this.lugar = {
        nombre,
        descripcion,
        direccion,
        plan,
        ciudad,
        pais
      }
}