Project 17: Search Results Page

Angular Engineer

Builds on these lessons

Component Task

Objective

Reactive forms build the form model explicitly in the class with FormGroup/FormControl, keeping validation logic out of the template and easier to unit test.

You're building a search bar.

Task: write a SearchComponent with a reactive searchForm containing a required query control, showing a validation message when it's invalid.

component.ts

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

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="searchForm">
      <input formControlName="query">
    </form>
    <p *ngIf="searchForm.get('query')?.invalid">Query is required</p>
  `
})
export class SearchComponent {
  searchForm = new FormGroup({
    query: new FormControl('', Validators.required)
  });
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →