Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- development:angular:formularios [10/02/2020 09:26] – creat mate
+++ development:angular:formularios [10/02/2020 09:45] (actual) – mate
@@ Línia 10: / Línia 10: @@
     * **[( propiedad )]**((banana in a box)), excepto si se usa **ngModel**
   * importar el **FormsModule** en **app.module.ts**
+=== caso
+  * doble binding con **ngModel** y **required**:<sxh typescript>
+<input required id="nombre"
+       class="form-control"
+       type="text"
+       placeholder="Nombre" name="nombre" ngModel></sxh>
+    * 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):<sxh typescript; highlight:4,6>
+<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>
+</sxh>
+  * además, para evitar la validación propia de HTML5 (y el navegador), tenemos:<sxh html><form [noValidate]="false"></sxh>
+    * si no la queremos, quitamos la etiqueta
+  * por contra, le añadimos una función y la vinculación a ella:<sxh typescript> guardar() {
+  console.log("Formulario enviado");
+}</sxh>
+<sxh html>
+<form (ngSubmit)="guardar()">
+</sxh>
+PPT 8.2~2
 == reactive forms (aka data-driven forms)
   * la clase del componente es responsable de craer el formulario, sus controles y la configuración de validación