Template-driven Forms Trong Angular (Phần 2)

15-01-2024
Toanngo92
0 Comments

Mục lục

Angular Forms Validation

Angular Forms Validation là quá trình kiểm tra và đảm bảo tính hợp lệ của dữ liệu nhập vào trong ứng dụng Angular. Có một số trạng thái quan trọng mà chúng ta cần biết khi thực hiện validation:

touched: Được đặt là true khi người dùng đã tương tác với control, chẳng hạn như tập trung vào input và sau đó chuyển đi. Hoặc khi chúng ta gọi markAsTouched.
untouched: Được đặt là true nếu người dùng chưa tương tác gì với control hoặc chỉ tập trung vào nó lần đầu tiên mà không rời khỏi. Ngược lại với touched.
dirty: Được đặt là true khi người dùng đã thay đổi giá trị của control, bao gồm cả việc nhập một ký tự vào input và sau đó xóa đi.
pristine: Được đặt là true nếu giá trị của control không thay đổi từ lúc nó được tạo, dù đã touched.

Các trạng thái trên sẽ đi kèm với các CSS class tương ứng, cho phép chúng ta tùy chỉnh giao diện của component dựa trên trạng thái validation. Dưới đây là các class CSS:

.ng-valid: Cho control hoặc form khi dữ liệu là hợp lệ.
.ng-invalid: Cho control hoặc form khi dữ liệu không hợp lệ.
.ng-pending: Cho control khi quá trình kiểm tra tính hợp lệ đang diễn ra.
.ng-pristine: Cho control hoặc form khi chưa có sự thay đổi nào.
.ng-dirty: Cho control hoặc form khi đã có sự thay đổi.
.ng-untouched: Cho control hoặc form khi chưa có sự tương tác nào từ người dùng.
.ng-touched: Cho control hoặc form khi đã có sự tương tác từ người dùng.

Việc hiểu rõ về các trạng thái và class CSS này sẽ giúp bạn tùy chỉnh và hiển thị thông điệp hoặc giao diện phản hồi hợp lý trong quá trình sử dụng Angular Forms.

Template-driven Forms Validation

Trong Angular Template-driven Forms, việc validation có sẵn thông qua một số directives cơ bản giúp kiểm tra tính hợp lệ của dữ liệu nhập vào:

required: Đảm bảo rằng form control không thể để trống.
minlength: Đảm bảo rằng form control phải có độ dài ít nhất bằng một giá trị cụ thể.
maxlength: Đảm bảo rằng form control không có độ dài vượt quá một giá trị nhất định.
pattern: Yêu cầu form control phải có giá trị khớp với một mẫu đặc biệt (sử dụng biểu thức chính quy).
email: Đảm bảo rằng form control phải chứa một giá trị có định dạng giống như một địa chỉ email.

Ví dụ, để áp dụng validation required cho một control, chúng ta có thể sử dụng directive required trong template:

<input matInput placeholder="Username" ngModel name="username" required />

Tương tự, các directives khác như minlength, maxlength, pattern, và email cũng có thể được sử dụng để kiểm tra và báo cáo tính hợp lệ của dữ liệu người dùng nhập vào form. Điều này giúp đảm bảo rằng dữ liệu được nhập vào đáp ứng được các yêu cầu cụ thể mà chúng ta muốn áp dụng trong ứng dụng Angular của mình.

Validate Forms

Đối với form Sign In như đã mô tả trước đó, giả sử trong dự án có những yêu cầu cụ thể như sau:

Username:
- Không được để trống.
- Phải có độ dài từ 6 đến 32 ký tự.
- Chỉ được chứa ký tự chữ cái.
Password:
- Không được để trống.
- Phải có độ dài từ 6 đến 32 ký tự.
- Chỉ chứa ký tự chữ cái và số.
- Phải chứa ít nhất một ký tự đặc biệt trong danh sách: !@#$%^&*.

Làm thế nào chúng ta có thể hiển thị thông báo cho người dùng khi họ nhập không chính xác? Dưới đây là một phần của form với Angular Template-driven Forms:

<div class="container">
  <form
    class="sign-in-form"
    novalidate
    #signInForm="ngForm"
    (submit)="onSubmit(signInForm)"
  >
    <h2>Sign in</h2>
    <div class="row-control">
      <mat-form-field appearance="outline">
        <mat-label>Username</mat-label>
        <input
          matInput
          placeholder="Username"
          [(ngModel)]="userInfo.userName"
          name="username"
          #username="ngModel"
          required
          minlength="6"
          maxlength="32"
          pattern="[a-zA-Z]+"
        />
        <mat-error *ngIf="username.touched && username.invalid">
          Please enter a valid username.
        </mat-error>
      </mat-form-field>
    </div>
    <div class="row-control">
      <mat-form-field appearance="outline">
        <mat-label>Password</mat-label>
        <input
          type="password"
          matInput
          placeholder="Password"
          [(ngModel)]="userInfo.password"
          name="password"
          #password="ngModel"
          required
          minlength="6"
          maxlength="32"
          pattern="[a-zA-Z0-9]+"
        />
        <mat-error *ngIf="password.touched && password.invalid">
          Please enter a valid password.
        </mat-error>
      </mat-form-field>
    </div>
    <div class="row-control">
      <mat-checkbox [(ngModel)]="userInfo.rememberMe" name="rememberMe"
        >Remember me</mat-checkbox
      >
    </div>
    <div class="row-control row-actions">
      <button mat-raised-button color="primary" type="submit">Sign in</button>
    </div>
    <pre>{{ signInForm.value | json }}</pre>
    <pre>{{ userInfo | json }}</pre>
  </form>
</div>

Trong mã nguồn trên, chúng ta đã sử dụng các directives như required, minlength, maxlength, và pattern để thực hiện validation và hiển thị thông báo lỗi tương ứng nếu có bất kỳ điều kiện nào không được đáp ứng.

Username input

Chúng ta sẽ tối ưu hóa trường nhập Username bằng cách thêm các chỉ đạo validation. Dưới đây là đoạn mã HTML và TypeScript tương ứng:

<mat-form-field appearance="outline">
  <mat-label>Username</mat-label>
  <input
    matInput
    placeholder="Username"
    required
    minlength="6"
    maxlength="32"
    [pattern]="usernamePattern"
    #username="ngModel"
    [(ngModel)]="userInfo.userName"
    name="username"
  />
  <mat-error *ngIf="username.touched && !username.valid">
    <span *ngIf="username.errors?.required">Username is required!</span>
    <span *ngIf="username.errors?.minlength || username.errors?.maxlength">
      Length should be between 6 and 32 characters.
    </span>
    <span *ngIf="!username.errors?.minlength && !username.errors?.maxlength && username.errors?.pattern">
      Only alphabet characters are allowed.
    </span>
  </mat-error>
</mat-form-field>

Trong đoạn mã TypeScript, chúng ta đã thêm các directives như required (bắt buộc), minlength (độ dài tối thiểu), maxlength (độ dài tối đa), và pattern (kiểm tra theo một biểu thức chính quy) vào trường nhập Username. Ngoài ra, chúng ta cũng đã tạo một biến usernamePattern để lưu trữ biểu thức chính quy, giúp xác định định dạng hợp lệ cho Username.

Kết quả là việc nhập liệu trong ô Username sẽ được kiểm tra ngay khi người dùng nhập, và các thông báo lỗi sẽ xuất hiện chỉ khi người dùng đã chạm vào trường nhập và giá trị không hợp lệ. Điều này giúp cải thiện trải nghiệm người dùng và cung cấp thông tin hữu ích về lỗi.

Password input

Chúng ta sẽ thực hiện tối ưu hóa trường nhập Password giống như trường nhập Username, với các chỉ đạo validation. Dưới đây là đoạn mã HTML và TypeScript tương ứng:

<mat-form-field appearance="outline">
  <mat-label>Password</mat-label>
  <input
    type="password"
    matInput
    placeholder="Password"
    required
    minlength="6"
    maxlength="32"
    [pattern]="passwordPattern"
    #password="ngModel"
    [(ngModel)]="userInfo.password"
    name="password"
  />
  <mat-error *ngIf="password.touched && !password.valid">
    <span *ngIf="password.errors?.required">Password is required</span>
    <span *ngIf="password.errors?.minlength || password.errors?.maxlength">
      Length should be between 6 and 32 characters.
    </span>
    <span
      *ngIf="!password.errors?.minlength && !password.errors?.maxlength && password.errors?.pattern"
    >
      Only alphabet, digit, and at least one of !@#$%^&* are allowed.
    </span>
  </mat-error>
</mat-form-field>

Trong đoạn mã TypeScript, chúng ta đã thêm các directives như required (bắt buộc), minlength (độ dài tối thiểu), maxlength (độ dài tối đa), và pattern (kiểm tra theo một biểu thức chính quy) vào trường nhập Password. Ngoài ra, chúng ta đã tạo một biến passwordPattern để lưu trữ biểu thức chính quy, giúp xác định định dạng hợp lệ cho Password.

Như với trường nhập Username, việc nhập liệu trong ô Password sẽ được kiểm tra ngay khi người dùng nhập, và các thông báo lỗi sẽ xuất hiện chỉ khi người dùng đã chạm vào trường nhập và giá trị không hợp lệ. Điều này giúp cải thiện trải nghiệm người dùng và cung cấp thông tin hữu ích về lỗi.