`touched` 成员

Question

<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
      }
    });
  }
}

我尝试使用角度创建反应式表单，并尝试使用代码中所示的“touched”来错误处理表单...但它显示为错误... 代码运行时没有任何错误，但没有按预期运行。 （即使我单击并离开文本字段而不输入任何值，跨度也不会出现）。 我还会附上 IDE 的屏幕截图...

也请不要介意我只尝试使用“initialTicketCount”文本字段进行测试的其他表单元素。 非常感谢。

ide 视图中显示错误 1
ide 视图中显示错误 2

Answer 1

我自己找到了这个问题的答案。 我会留下这个问题，因为有人可能会发现它有用 您可以使用

get()

 方法来消除错误。

<div class="error-message" *ngIf="configurationForm.get('initialTicketCount')?.touched"> 这解决了错误。