`touched` member is not accessible when creating a reactive from using angular

<div class="container mt-5">
<!-- Form Title -->
<h1 class="form-title text-center">Tixsim</h1>

<!-- Form Section -->
<form [formGroup]="configurationForm" class="form-layout mx-auto" (submit)="onSaveConfiguration()">
<!-- Event Name -->
<div class="form-row">
<label for="eventName" class="form-label">Event name:</label>
<div class="form-input">
<input
type="text"
id="eventName"
formControlName="eventName"
class="form-control"
/>
<div class="error-message">
<span>&bull; This is an error</span>
</div>
</div>
</div>

<!-- Initial Ticket Count -->
<div class="form-row">
<label for="initialTicketCount" class="form-label">Initial ticket count:</label>
<div class="form-input">
<input
type="text"
id="initialTicketCount"
formControlName="initialTicketCount"
class="form-control"
/>
<div class="error-message" *ngIf="configurationForm.controls?.['initialTicketCount'].touched">
<span *ngIf="configurationForm.controls?.['initialTicketCount'].errors?.['required']">&bull; This is an error</span>
</div>
</div>
</div>

<!-- Ticket Release Rate -->
<div class="form-row">
<label for="ticketReleaseRate" class="form-label">Ticket release rate:</label>
<div class="form-input">
<input
type="text"
id="ticketReleaseRate"
formControlName="ticketReleaseRate"
class="form-control"
/>
<div class="error-message">
<span>&bull; This is an error</span>
</div>
</div>
</div>

<!-- Ticket Retrieval Rate -->
<div class="form-row">
<label for="ticketRetrievalRate" class="form-label">Ticket retrieval rate:</label>
<div class="form-input">
<input
type="text"
id="ticketRetrievalRate"
formControlName="ticketRetrievalRate"
class="form-control"
/>
<div class="error-message">
<span>&bull; This is an error</span>
</div>
</div>
</div>

<!-- Max Ticket Capacity -->
<div class="form-row">
<label for="maxTicketCapacity" class="form-label">Max ticket capacity:</label>
<div class="form-input">
<input
type="text"
id="maxTicketCapacity"
formControlName="maxTicketCapacity"
class="form-control"
/>
<div class="error-message">
<span>&bull; This is an error</span>
</div>
</div>
</div>

<!-- Buttons -->
<div class="form-buttons">
<button type="submit" class="btn btn-primary">Save and start</button>
<button type="button" class="btn btn-secondary">View saved events</button>
</div>
</form>
</div>



import { Component } from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';

@Component({
selector: 'app-configuration-form',
standalone: true,
imports: [
FormsModule,
ReactiveFormsModule,
HttpClientModule // Import HttpClientModule
],
templateUrl: './configuration-form.component.html',
styleUrls: ['./configuration-form.component.css'] // Fix typo (styleUrl -> styleUrls)
})
export class ConfigurationFormComponent {

constructor(private http: HttpClient) {}

public configurationForm: FormGroup = new FormGroup({
eventName: new FormControl("", [Validators.required]),
initialTicketCount: new FormControl(0, [
Validators.required,
Validators.pattern('^[1-9][0-9]*$'),
Validators.min(1)
]),
ticketReleaseRate: new FormControl(0, [
Validators.required,
Validators.pattern('^[1-9][0-9]*$'),
Validators.min(1)
]),
ticketRetrievalRate: new FormControl(0, [
Validators.required,
Validators.pattern('^[1-9][0-9]*$'),
Validators.min(1)
]),
maxTicketCapacity: new FormControl(0, [
Validators.required,
Validators.pattern('^[1-9][0-9]*$'),
Validators.min(1)
])
});

onSaveConfiguration(): void {
const obj = this.configurationForm.value;
this.http.post('https://jsonplaceholder.typicode.com/users', obj).subscribe({
next: (res: any) => {
alert('User Created');
console.log(res); // Log response for debugging
},
error: (error: any) => {
console.error('Error occurred:', error); // Handle errors
},
complete: () => {
console.log('Request completed'); // Optional: Runs when the Observable completes
}
});
}
}



I tried to create a reactive form using angular and tried to use the "touched" as shown in the code to error handle the form...But it is shown as an error... The code runs without any bugs but it is not functioning as expected. (The span will not appear even if i click and leave the text field without entering any value). I will also attach a screenshot of the IDE...

And also please don't mind about the other form elements i only tried testing with the text field for "initialTicketCount". Thanks very much.

Error showing in the ide view 1
Error showing in the ide view 2

Continue reading...