Angular 2. Formularios. Entrega 1

Voy a seguir esta vez la guia oficial de Angular 2.

1. Creación del proyecto con angular-cli.

Vamos a crear un proyecto llamado angular-forms. Para ello lo haremos tal como dijimos en un post anterior. Hay que tener en cuenta que en entornos windows no hay que indicar el "sudo", pero hay que ejecutar el comando en interprete de comandos en modo administrador.

sudo ng new angular-forms

(lo de sudo es si utilizamos Ubuntu) y esperamos lo nuestro.

y nos situamos en la carpeta angular-forms y ejecutamos

sudo ng serve 

para ver si funciona (abrimos el navegador en http://localhost:4200 y debe aparecer el texto "app works!" en el navegador).

2. Construcción de un formulario con un componente y template (plantilla).

Hay que tener cuidadado si utilizamos angular.cli para hacer este ejemplo ya que:

1. A veces no refresca el contenido bien o lo bastante rápido. A veces parece que se ha refrescado pero, no ha compilado bien. En este caso, sucede que no reconoce la función newHero(). Tras meterle dentro codigo adicional como :
  "console.log("lo que sea"); 
ha funcionado correctamente.


2.Las rutas que se proponen en el ejemplo, deben de ser relativas al elemento que se indica (tienen que ser del tipo "./". Por ejemplo si copiamos el componente hero-form.component.ts del ejemplo, observamos esta línea:
   templateUrl:'hero-form.component.html'
Pues, debería ser esta otra            
  templateUrl:'./hero-form.component.html'

3. La distribución de los componentes puede no ser la misma. Por ejemplo el fichero index.html, angular cli lo mete en la carpeta padre de la carpeta app, y no en la misma como se muestra en el tutorial de angular.

4. Para acceder al CSS que nos proporciona Bootstrap (no confundir con el comando Bootstrap que aparece dentro de los componentes), se puede meter en la sección "head" del index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

5. El fichero de estilos forms.css debera estar en el mismo directorio que index.html o sea en src, pero para acceder a él será tambien con ruta relativa "./" y no en forma absoluta, si no no lo encuentra.

<link rel="stylesheet" href="./forms.css">

Dicho esto, ya funciona el ejemplo de la documentación de angular.

Vamos a destacar lo más importante:

1. Se crea un clase Hero que se guarda en hero.ts (dentro de la carpeta app), que define la información a guardar.
-----------------------------------------------------------------------------------------------------------------


2. Se crea el componente HeroFormComponent que se guarda en hero-form.component.ts (dentro de la carpeta app), que:

  2.1 hay que indicarle la ruta RELATIVA al componente html:
       templateUrl:'./hero-form.component.html'

2.2 No admite la sentencia:
       moduleId: module.id,

2.3 Se definen estas funciones, que seran llamadas en los botones del form:
        onSubmit() { this.submitted = true; }
newHero() {this.model = new Hero(42, '', ''); }
 
  2.4 Inicialmente se definió el "getter" diagnostic para tener indicadores.
        get diagnostic() { return JSON.stringify(this.model); }
  2.5 Se tiene que importar la clase Hero
        import { Hero } from './hero'

-----------------------------------------------------------------------------------------------------------------

3. Se crea la plantilla hero.form.components.html que es capaz de recoger información del componente:
  3.1 Para mostrar información fuera de una etiqueta html se utiliza la notación moustache:
        {{diagnostic}}
3.2 Dentro del la etiqueta html hay que utilizar [ngModel] para vincular a un atributo del componente.
  3.3 Tambiém se pueden definir eventos dentro de la etiquete entre paréntesis (ngModelChange) .Para el caso de darle a un botón se le puede asignar varias funciones (Ojo, si hacemos reset al form, se borrará toda la información del form. Por tanto yo invertiría el orden de las funciones a heroForm.reset(); newHero() en vez de lo que se pone a continuación que es copia del tutorial de angular.

<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>

  3.4 Existen clases que indican que:
       3.4.1: Control visitado o no  (ng-touched, ng-untouched)
       3.4.2: Control con valor cambiado o no (ng-dirty, ng-pristine)
       3.4.3: Contor con valor correcto o ni (ng-valid, ng-invalid)
   3.5 Para hacer referencia a un componente se define dentro de el com #nombre_componente y después de puede acceder a el con notación mustache. En este caso se le ha dado el nombre spy

<input type="text" class="form-control" id="name"
  required
  [(ngModel)]="model.name" name="name"
  #spy >
<br>TODO: remove this: {{spy.className}}

    y devuelve "TODO: remove this: form-control ng-untouched ng-pristine" que contine la información de las clases css del control texto.

  3.6 Se les ha dado el atributo required para la validación en algunos campos.
  3.7 Como ya hemos dicho en el punto 3.3, la función reset() del formulario borra el contenido de los controles, por tanto si ejecutamos newHero() despues del reset, los controles se llenaran con la información proporcionada por defecto en este constructor. Si se ejecuta anteriormente, se perderán los valores por omisión, y el formulario se quedará en blanco.
  3.8 Se pueden asociar atributos de las tags de html a variables del componente. Por ejemplo el atributo hidden de la etiqueta div, que toma el valor de la variable submitted

<div  [hidden]="submitted"> 

 3.9 La variable o propiedad valid del form se puede asignar también al atributo disabled de un control:
<button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>

3.10 Con *ngFor rellenamos el control select

  <select class="form-control" id="power" required>
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
  </select>

-----------------------------------------------------------------------------------------------------------------

4. El módulo app.module.ts debe de hacer referncias a HeroComponent tanto en import como en declarations (y como estamos utilizando forms, también debe importar FormsModule)
    ......
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form.component';

 @NgModule({
....
declarations: [ AppComponent, HeroFormComponent ],
....
})


Al final queda