使用Angular验证spring boot中的UserDto类

// user-dto.ts

import { FormControl, FormGroup, Validators } from '@angular/forms';

export class UserDto {
  name: string;
  email: string;
  password: string;

  static buildForm(): FormGroup {
    return new FormGroup({
      name: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', [Validators.required, Validators.minLength(6)]),
    });
  }
}

<!-- user-form.component.html -->

<form [formGroup]="userForm" (ngSubmit)="submitForm()">
  <div>
    <label>Name:</label>
    <input type="text" formControlName="name">
    <div *ngIf="userForm.get('name').invalid && userForm.get('name').touched">
      <div *ngIf="userForm.get('name').hasError('required')">Name is required.</div>
    </div>
  </div>
  <div>
    <label>Email:</label>
    <input type="email" formControlName="email">
    <div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">
      <div *ngIf="userForm.get('email').hasError('required')">Email is required.</div>
      <div *ngIf="userForm.get('email').hasError('email')">Invalid email format.</div>
    </div>
  </div>
  <div>
    <label>Password:</label>
    <input type="password" formControlName="password">
    <div *ngIf="userForm.get('password').invalid && userForm.get('password').touched">
      <div *ngIf="userForm.get('password').hasError('required')">Password is required.</div>
      <div *ngIf="userForm.get('password').hasError('minlength')">Password should be at least 6 characters long.</div>
    </div>
  </div>
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

// user-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { UserDto } from './user-dto';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;

  ngOnInit() {
    this.userForm = UserDto.buildForm();
  }

  submitForm() {
    if (this.userForm.valid) {
      const userDto: UserDto = this.userForm.value;
      // Send userDto to Spring Boot backend for further processing
    }
  }
}