Angular: Template Driven Forms in Angular (ngModel).

Angular provides robust form handling techniques, and one of the easiest ways to handle forms is through Template Driven Forms.

Below example one of the thing I am learning.

import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { type NewTaskData } from '../task/task.model';
import { TasksService } from '../tasks.service';

@Component({
  selector: 'app-new-task',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './new-task.component.html',
  styleUrl: './new-task.component.css'
})
export class NewTaskComponent {
  @Input({required: true}) userId!: string;
  @Output() close = new EventEmitter<void>()

  @Output() add = new EventEmitter<NewTaskData>()
  enteredTitle = '';
  enteredSummry = "";
  enteredDate = ""; 

  private tasksService = inject(TasksService)

  onSubmit() {
   
    this.tasksService.addTask({
      title: this.enteredTitle,
      summary: this.enteredSummry,
      date: this.enteredDate
    }, this.userId)

    this.close.emit()
    // console.log(this.enteredTitle, this.enteredSummry, this.enteredDate)
  }

  onCancel() {  
    this.close.emit()
  }
}

<div class="new-task-form">
  <form (ngSubmit)="onSubmit()" #taskForm="ngForm">

    <div class="form-group">
      <label for="title">Title</label>
      <input
        type="text"
        id="title"
        name="title"
        [(ngModel)]="enteredTitle"
        required
        class="form-control"
      />
    </div>

    <div class="form-group">
      <label for="summary">Summary</label>
      <input
        type="text"
        id="summary"
        name="summary"
        [(ngModel)]="enteredSummary"
        required
        class="form-control"
      />
    </div>

    <div class="form-group">
      <label for="date">Date</label>
      <input
        type="date"
        id="date"
        name="date"
        [(ngModel)]="enteredDate"
        required
        class="form-control"
      />
    </div>

    <button type="submit" class="btn btn-primary" [disabled]="taskForm.invalid">Add Task</button>
    <button type="button" class="btn btn-secondary" (click)="onCancel()">Cancel</button>
  </form>
</div>