formularios

la plantilla es la responsable de crear los controles, formularios y reglas de validación
sincronización entre la vista y el modelo con el doble enlace (two-way databinding)
- si la vista cambia, se actualiza el modelo, y viceversa
- se enlaza con el atributo name de html y el atributo ngModel de Angular
```
<input id="nombre" name="nombre" class="form-control"
    type="text"
    placeholder="Nombre" ngModel>
```
- [( propiedad )]¹⁾, excepto si se usa ngModel
importar el FormsModule en app.module.ts

doble binding con ngModel y required:
```
<input required id="nombre"
       class="form-control"
       type="text"
       placeholder="Nombre" name="nombre" ngModel>
```
- el framewrok añadirá una serie de clases para indicar diferentews estados (ng-pristne, ng-dirty, ng-untoched, ng-touched, ng-valid, ng-invalid) que nos puede servir para darle nuestro estilo (css)

añadir #espia y espia.classname para opciones de «debug» (y ver que clases tiene nuestro control):

<div class="form-group row">
   <label for="nombre" class="col-2 col-form-label">Nombre</label>
   <div class="col-8">
     <input #espia ngModel id="nombre" name="nombre" required class="form-control" type="text" placeholder="Nombre">
  </div>
  {{espia.className}}
</div>

además, para evitar la validación propia de HTML5 (y el navegador), tenemos:
```
<form [noValidate]="false">
```
- si no la queremos, quitamos la etiqueta
por contra, le añadimos una función y la vinculación a ella:
```
 guardar() {
  console.log("Formulario enviado");
}
```