Task Form, Dashboard, and Reactive Forms Patterns

The task form is where users create and edit tasks — a rich form with title, description, priority, due date, tag management, and assignee selection. It demonstrates every Angular reactive form pattern from Chapters 13–14: FormBuilder for schema, custom validators, async validators, ControlValueAccessor components, dynamic form arrays, and the interplay between form validity and submit button state. The workspace dashboard brings together the aggregation pipeline from Chapter 13 with chart rendering, demonstrating full-stack data flow from MongoDB aggregation to an Angular visualisation.

Task Form Field Architecture #

Complete Task Form and Dashboard #

// ── features/tasks/components/task-form/task-form.component.ts ──────────
import { Component, Input, Output, EventEmitter, OnInit, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray,
         Validators, AbstractControl, ValidationErrors }          from '@angular/forms';
import { CommonModule }  from '@angular/common';
import { Task, CreateTaskDto, UpdateTaskDto, TaskPriority } from '@taskmanager/shared';

function futureDateValidator(control: AbstractControl): ValidationErrors | null {
    if (!control.value) return null;
    const date = new Date(control.value);
    return date > new Date() ? null : { pastDate: 'Due date must be in the future' };
}

@Component({
    selector:   'tm-task-form',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [ReactiveFormsModule, CommonModule, TagInputComponent, AssigneeSelectorComponent],
    template: `
        <form [formGroup]="form" (ngSubmit)="onSubmit()" class="task-form">

            <!-- Title -->
            <div class="form-field">
                <label for="title">Title <span class="required">*</span></label>
                <input id="title" formControlName="title" type="text"
                       placeholder="What needs to be done?"
                       [class.error]="titleCtrl.invalid && titleCtrl.touched">
                <div class="char-count">{{ titleCtrl.value?.length || 0 }} / 500</div>
                @if (titleCtrl.invalid && titleCtrl.touched) {
                    <span class="field-error" data-testid="title-error">
                        {{ titleCtrl.errors?.['required'] ? 'Title is required' :
                           titleCtrl.errors?.['maxlength'] ? 'Title is too long' : '' }}
                    </span>
                }
            </div>

            <!-- Description -->
            <div class="form-field">
                <label for="description">Description</label>
                <textarea id="description" formControlName="description"
                          rows="4" placeholder="Add more details..."></textarea>
            </div>

            <!-- Priority -->
            <div class="form-field">
                <label>Priority</label>
                <div class="priority-group">
                    @for (p of priorities; track p.value) {
                        <button type="button"
                                [class]="'priority-btn priority-btn--' + p.value"
                                [class.active]="form.get('priority')?.value === p.value"
                                (click)="form.get('priority')!.setValue(p.value)">
                            {{ p.label }}
                        </button>
                    }
                </div>
            </div>

            <!-- Due date -->
            <div class="form-field">
                <label for="dueDate">Due Date</label>
                <input id="dueDate" formControlName="dueDate" type="date">
                @if (dueDateCtrl.errors?.['pastDate'] && dueDateCtrl.touched) {
                    <span class="field-error">Due date must be in the future</span>
                }
            </div>

            <!-- Tags (custom CVA component) -->
            <div class="form-field">
                <label>Tags</label>
                <tm-tag-input formControlName="tags"
                              placeholder="Add tag, press Enter"></tm-tag-input>
            </div>

            <!-- Submit -->
            <div class="form-actions">
                <button type="button" class="btn btn--ghost" (click)="onCancel.emit()">Cancel</button>
                <button type="submit" class="btn btn--primary"
                        [disabled]="form.invalid || saving()"
                        data-testid="submit-btn">
                    {{ saving() ? 'Saving...' : (task ? 'Update Task' : 'Create Task') }}
                </button>
            </div>
        </form>
    `,
})
export class TaskFormComponent implements OnInit {
    @Input() task?: Task;
    @Input() workspaceId!: string;
    @Input() saving = signal(false);
    @Output() save   = new EventEmitter<CreateTaskDto | UpdateTaskDto>();
    @Output() onCancel = new EventEmitter<void>();

    private fb = inject(FormBuilder);

    readonly priorities: { value: TaskPriority; label: string }[] = [
        { value: 'none',   label: 'None'   },
        { value: 'low',    label: 'Low'    },
        { value: 'medium', label: 'Medium' },
        { value: 'high',   label: 'High'   },
        { value: 'urgent', label: 'Urgent' },
    ];

    form!: FormGroup;
    get titleCtrl()   { return this.form.get('title')!;   }
    get dueDateCtrl() { return this.form.get('dueDate')!; }

    ngOnInit(): void {
        this.form = this.fb.group({
            title:       [this.task?.title ?? '', [Validators.required, Validators.maxLength(500)]],
            description: [this.task?.description ?? '', Validators.maxLength(10000)],
            priority:    [this.task?.priority ?? 'medium', Validators.required],
            dueDate:     [this.task?.dueDate?.slice(0, 10) ?? '', futureDateValidator],
            tags:        [this.task?.tags ?? []],
            assignees:   [this.task?.assignees ?? []],
        });
    }

    onSubmit(): void {
        if (this.form.invalid) {
            this.form.markAllAsTouched();
            return;
        }

        const value = this.form.value;
        const dto: CreateTaskDto | UpdateTaskDto = {
            title:       value.title.trim(),
            description: value.description?.trim() || undefined,
            priority:    value.priority,
            dueDate:     value.dueDate || undefined,
            tags:        value.tags,
            assignees:   value.assignees,
            ...(this.task ? {} : { workspaceId: this.workspaceId }),
        };

        this.save.emit(dto);
    }
}

// ── Workspace dashboard — aggregation + charts ────────────────────────────
// features/workspaces/components/workspace-dashboard.component.ts
@Component({
    selector:   'tm-workspace-dashboard',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <div class="dashboard">
            @if (stats(); as s) {
                <!-- KPI cards -->
                <div class="kpi-grid">
                    <tm-kpi-card label="Total Tasks"       [value]="s.total"         icon="list"     />
                    <tm-kpi-card label="Completed"         [value]="s.done"           icon="check"    color="green" />
                    <tm-kpi-card label="Overdue"           [value]="s.overdue"        icon="clock"    color="red" />
                    <tm-kpi-card label="Due This Week"     [value]="s.dueThisWeek"   icon="calendar" color="amber" />
                </div>

                <!-- Status breakdown (donut chart) -->
                <tm-donut-chart [data]="s.byStatus" title="By Status" />

                <!-- Completion trend (line chart) -->
                <tm-line-chart  [data]="s.completionTrend" title="Completed (Last 30 Days)" />

                <!-- Tag cloud -->
                <tm-tag-cloud   [tags]="s.tagCloud" (tagClick)="filterByTag($event)" />
            }
        </div>
    `,
})
export class WorkspaceDashboardComponent implements OnInit {
    @Input() workspaceId!: string;
    private workspaceService = inject(WorkspaceService);

    stats = signal<WorkspaceDashboardData | null>(null);

    ngOnInit(): void {
        this.workspaceService.getDashboard(this.workspaceId).subscribe(data => {
            this.stats.set(data);
        });
    }

    filterByTag(tag: string): void {
        // Navigate to task list with tag filter
    }
}

How It Works #

Step 1 — Custom Validators Are Pure Functions #

futureDateValidator is a plain function that takes an AbstractControl and returns null (valid) or a ValidationErrors object (invalid). Passing it to Validators` list makes Angular call it on every control value change. Custom validators enable domain-specific rules — "due date must be in the future", "title cannot start with a number", "maximum 10 tags" — that Validators.required and Validators.maxLength cannot express.