<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" ngModel>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel>
  <br>
  <button type="submit">Submit</button>
</form>

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

@Component({
  selector: 'app-template-form',
  templateUrl: './template-form.component.html',
  styleUrls: ['./template-form.component.css']
})
export class TemplateFormComponent {
  onSubmit(form: NgForm) {
    console.log('Form Submitted!', form.value);
  }
}

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

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
  });

  onSubmit() {
    console.log('Form Submitted!', this.myForm.value);
  }
}

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">
  <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
    Name is required.
  </div>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
  <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched">
    Enter a valid email.
  </div>
  <br>
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" ngModel required>
  <div *ngIf="myForm.controls['name'].invalid && myForm.controls['name'].touched">
    Name is required.
  </div>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel required email>
  <div *ngIf="myForm.controls['email'].invalid && myForm.controls['email'].touched">
    Enter a valid email.
  </div>
  <br>
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

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

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
  });

  onSubmit() {
    console.log('Form Submitted!', this.myForm.value);
  }
}

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent {
  myForm = new FormGroup({
    fields: new FormArray([
      new FormControl('Field 1'),
      new FormControl('Field 2')
    ])
  });

  addField() {
    (this.myForm.get('fields') as FormArray).push(new FormControl('New Field'));
  }

  onSubmit() {
    console.log('Form Submitted!', this.myForm.value);
  }
}

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formArrayName="fields">
    <div *ngFor="let field of myForm.get('fields').controls; let i = index">
      <input [formControlName]="i">
    </div>
  </div>
  <button type="button" (click)="addField()">Add Field</button>
  <button type="submit">Submit</button>
</form>

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

@Component({
  selector: 'app-error-handling-form',
  templateUrl: './error-handling-form.component.html',
  styleUrls: ['./error-handling-form.component.css']
})
export class ErrorHandlingFormComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
  });

  get name() {
    return this.myForm.get('name');
  }

  get email() {
    return this.myForm.get('email');
  }

  onSubmit() {
    console.log('Form Submitted!', this.myForm.value);
  }
}

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">
  <div *ngIf="name.invalid && (name.dirty || name.touched)">
    <div *ngIf="name.errors.required">Name is required.</div>
  </div>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
  <div *ngIf="email.invalid && (email.dirty || email.touched)">
    <div *ngIf="email.errors.required">Email is required.</div>
    <div *ngIf="email.errors.email">Enter a valid email.</div>
  </div>
  <br>
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>