What are some examples of forms in Angular?

What are some examples of forms in Angular?

Angular provides various types of forms, including reactive forms and template-driven forms. Would you like to see examples of both?

Yes, please show me an example of a reactive form.

Sure! A simple reactive form can be created using FormGroup and FormControl. Here's a basic example:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]='myForm' (ngSubmit)='onSubmit()'>
      <input formControlName='name' placeholder='Name' />
      <input formControlName='email' placeholder='Email' />
      <button type='submit'>Submit</button>
    </form>
  `
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

This creates a form with name and email fields.

What about a template-driven form?

A template-driven form is simpler and uses Angular directives in the template. Here's an example:

<form #myForm='ngForm' (ngSubmit)='onSubmit(myForm)'>
  <input name='name' ngModel required placeholder='Name' />
  <input name='email' ngModel required email placeholder='Email' />
  <button type='submit'>Submit</button>
</form>

In your component, you can handle the submission like this:

onSubmit(form: NgForm) {
  console.log(form.value);
}

Thanks! Can you explain the difference between reactive and template-driven forms?