FORMULARIOS EN ANGULAR

Los formularios Angular son formularios html con un conjunto de funcionalidades añadidas por Angular.

Para crear un formulario Angular es necesario asignarle un nombre al formulario(en este caso formUsuario) a continuación de una almohadilla o hashtag(#) y a continuación, indicándole que es un tipo de formulario de tipo Angular ("ngForm"), dentro de la etiqueta form.

Ejemplo de formulario 

 <form #formUsuario= "ngForm">
     <label for = "user">Nombre</label><br>
    <input type="text" name="nombre">
    <input type="submit" value="Enviar">
</form>

Capturar un evento en un formulario Angular es muy sencillo mediante la directiva (ngSubmit). Se añade la directiva y se le asigna un método desde la clase del componente ("onSubmit") donde se maneja la captura del evento submit.

     <form #formUsuario= "ngForm" (ngSubmit) = "onSubmit()">
         <label for = "user">Nombre</label><br>
        <input type="text" name="nombre">
        <input type="submit" value="Enviar">
    </form>

import { Component, OnInit } from '@angular/core';
import { User } from "usuario/user.component";
@Component({
  selector: 'ed-usuario',
  templateUrl: './usuario.component.html',
  styleUrls: ['./usuario.component.css']
})
export class UsuarioComponent implements OnInit {
	public usuario:User;
  
  constructor() {
  	this.usuario= new User(" "," "," "," ");
   }
  ngOnInit() {
  }
  onSubmit(form){
  	console.log("Evento capturado");
  }
}

De igual forma que el formulario los campos se convierten a campos de tipo Angular identificando con un nombre el campo y asignándole ngModel. También es posible aplicar a los campos la funcionalidad de Angular denominada two data-binding añadiendo la directiva [(ngModel)] y asignándole el dato que viene del componente( en el ejemplo el dato es la propiedad nombre del objeto usuario).

         <form #formUsuario= "ngForm" (ngSubmit) = "onSubmit()">
             <label for = "user">Nombre</label><br>
            <input type="text" name="nombre" #nombre="ngModel" [(ngModel)] = "usuario.nombre">
            <input type="submit" value="Enviar">
        </form>

VALIDACIÓN

La validación de un campo en Angular se puede obtener añadiendo una directiva ngIf a un nuevo elemento. Este elemento que se encarga de mostrar el mensaje de validación se puede coordinar mediante los atributos required y pattern (atributos nativos de html) del campo a validar.

<form #formUsuario= "ngForm" (ngSubmit) = "onSubmit()">
    <label for = "user">Nombre</label><br>
    <input type="text" name="nombre" #nombre="ngModel" [(ngModel)] = "usuario.nombre" required pattern="[a-zA-Z]+">
    <span *ngIf = "nombre.touched && !nombre.valid">
        Debe escribir un nombre
    </span>
    <input type="submit" value="Enviar">
</form>

Con Angular es posible añadir funcionalidades al formulario como desactivar temporalmente el botón de submit mediante la directiva [disabled] o resetear el formulario mediante la inclusión del parámetro identificativo del formulario en el método onSubmit().

En el ejemplo siguiente se puede observar como el identificador del formulario formUsuario es pasado como parámetro en el método onSubmit, esto exige añadir un parámetro en el método declarado en el componente.

    <form #formUsuario= "ngForm" (ngSubmit) = "onSubmit(formUsuario)">
        <label for = "user">Nombre</label><br>
        <input type="text" name="nombre" #nombre="ngModel" [(ngModel)] = "usuario.nombre" required pattern="[a-zA-Z]+">
        <span *ngIf = "nombre.touched && !nombre.valid">
            Debe escribir un nombre
        </span>
        <input type="submit" value="Enviar" [disabled] = "!formUsuario.form.valid">
    </form>

ViewChild()

ViewChild es un decorador de propiedades de Angular. Con este decorador es posible obtener valores o ejecutar métodos entre componentes (padre e hijo), acceso a directivas y acceso a propiedades de elementos html.

Ejemplo de acceso a elemento html

        import { Component, OnInit, ViewChild } from '@angular/core';
        @Component({
          selector: 'ed-page',
          templateUrl: './pagecomponent.html',
          styleUrls: ['./page.component.css']
        })
        export class PageComponent implements OnInit {
            @ViewChild("div_prueba") prueba_viewchild;
          constructor() {    
          }
          ngOnInit() {
            var con_javascript = console.log(document.getElementById("id_con_javascript").innerHTML);
            console.log(this.prueba_viewchild.nativeElement.innerText);
            console.log(this.prueba_viewchild.nativeElement.innerHTML);
          }
        }

    <div>
      <div id="id_con_javascript" #div_prueba>
        <p>Texto exclusivo para prueba de ViewChild</p>
      </div>
    </div>