Angular: Estructura de un Formulario

 Estructura de un Formulario

 Los formularios en Angular permiten recopilar datos del usuario. Hay dos enfoques: basado en plantillas (template-driven) y reactivo (model-driven). Ejemplo de formulario basado en plantillas: Aquí, ngForm, ngSubmit y ngModel son directivas para manejar el formulario.

HTML

<form #myForm="ngForm" (ngSubmit)="guardarDatos(myForm)">
  <input type="text" name="nombre" placeholder="Nombre" [(ngModel)]="nombre" />
  <input type="email" name="correo" placeholder="Correo" [(ngModel)]="correo" />
  <button type="submit">Guardar</button>
</form>

Ejemplo de formulario: 

Html

<form (ngSubmit)="onSubmit()" #form="ngForm">
<label for="name">Name:</label>
		<input type="text" id="name" required [(ngModel)]="model.name" name="name">
<label for="email">Email:</label>
		<input type="email" id="email" required [(ngModel)]="model.email" name="email">
<button type="submit" [disabled]="!form.valid">Submit</button>
</form>

typescript: copiar código

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  model = { name: '', email: '' };
  onSubmit() {
    console.log('Form data:', this.model);
  }
}

...