Giới thiệu

Trong thế giới phát triển web, việc tạo các biểu mẫu tương tác và thân thiện với người dùng là một khía cạnh quan trọng của việc xây dựng giao diện người dùng hấp dẫn. Angular, một khung JavaScript phổ biến, cung cấp một tính năng mạnh mẽ gọi là Biểu mẫu phản ứng cho phép các nhà phát triển tạo các biểu mẫu năng động và mạnh mẽ với khả năng tương tác người dùng và xác thực nâng cao. Trong bài viết này, chúng ta sẽ đi sâu vào các Hình thức phản ứng góc, khám phá các tính năng, lợi ích, cách triển khai và các phương pháp hay nhất của chúng.

Mục lục

1. Hiểu các hình thức phản ứng

   • Các hình thức phản ứng là gì?
   • Ưu điểm chính của các hình thức phản ứng

2. Bắt đầu với các hình thức phản ứng

   • Thiết lập một dự án góc
   • Nhập ReactiveFormsModule
   • Tạo biểu mẫu cơ bản

3. Kiểm soát và xác thực biểu mẫu

   • Làm việc với Điều khiển biểu mẫu
   • Áp dụng trình xác thực
   • Hiển thị thông báo xác thực

4. Trường biểu mẫu động

   • Tạo các trường biểu mẫu một cách linh hoạt
   • FormArray: Quản lý mảng điều khiển biểu mẫu
   • Thêm và xóa các trường biểu mẫu

5. Gửi biểu mẫu và xử lý dữ liệu

   • Xử lý việc gửi biểu mẫu
   • Truy cập giá trị biểu mẫu
   • Đặt lại và cập nhật dữ liệu biểu mẫu

6. Kỹ thuật tiên tiến

   • Xác thực chéo trường
   • Trình xác thực tùy chỉnh
   • Xác thực không đồng bộ

7. Tương tác người dùng và phản hồi theo thời gian thực

   • Xác thực có điều kiện
   • Cập nhật giao diện người dùng dựa trên biểu mẫu nhập
   • Cung cấp phản hồi tức thì

8. Các phương pháp hay nhất để sử dụng hiệu quả

   • Tách các mối quan tâm
   • Nguyên tắc MECE trong thiết kế biểu mẫu
   • Cân nhắc khả năng tiếp cận

9. Phần hỏi đáp

   • Các câu hỏi thường gặp về các hình thức phản ứng

Hiểu các hình thức phản ứng

Các hình thức phản ứng là gì?

Biểu mẫu phản ứng trong Angular cung cấp cách tiếp cận khai báo để tạo và quản lý biểu mẫu trong ứng dụng của bạn. Không giống như Biểu mẫu hướng mẫu, Biểu mẫu phản ứng được xây dựng theo chương trình bằng cách sử dụng các lớp TypeScript. Cách tiếp cận này mang lại khả năng kiểm soát và tính linh hoạt cao hơn đối với việc xác thực biểu mẫu và tương tác của người dùng.

Ưu điểm chính của các hình thức phản ứng

Biểu mẫu phản ứng cung cấp một số lợi thế so với các phương pháp xử lý biểu mẫu khác:

• Kiểm soát rõ ràng: Với Biểu mẫu phản ứng, bạn có toàn quyền kiểm soát các điều khiển, xác thực và gửi biểu mẫu. Điều này giúp việc triển khai các kịch bản xác thực phức tạp và hành vi tùy chỉnh trở nên dễ dàng hơn.
• Cấu trúc biểu mẫu động: Biểu mẫu phản ứng vượt trội trong các tình huống trong đó các trường biểu mẫu cần được tạo động, chẳng hạn như khi xử lý các câu hỏi hoặc khảo sát động.
• Khả năng kiểm tra: Việc tách logic biểu mẫu khỏi mẫu giúp việc kiểm thử đơn vị trở nên đơn giản hơn nhiều, cho phép bạn viết các trường hợp kiểm thử cho mã liên quan đến biểu mẫu của mình.
• Phản ứng: Biểu mẫu phản ứng đúng như tên gọi của chúng bằng cách phản ứng với những thay đổi về giá trị biểu mẫu và trạng thái điều khiển. Điều này cho phép cập nhật theo thời gian thực và thay đổi giao diện người dùng động dựa trên thông tin đầu vào của người dùng.

Bắt đầu với các hình thức phản ứng

Thiết lập một dự án góc

Trước khi đi sâu vào Reactive Forms, hãy thiết lập một dự án Angular. Nếu bạn chưa cài đặt Angular CLI, bạn có thể thực hiện bằng lệnh sau:

npm install -g @angular/cli

Tạo một dự án Angular mới:

ng new ReactiveFormsDemo

Điều hướng đến thư mục dự án:

cd ReactiveFormsDemo

Nhập ReactiveFormsModule

Các hình thức phản ứng là một phần của @angular/forms bưu kiện. Để sử dụng chúng, bạn cần nhập ReactiveFormsModule trong mô-đun ứng dụng của bạn. Mở app.module.ts tập tin và thêm phần nhập sau:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    
    ReactiveFormsModule,
  ],
  
})
export class AppModule { }

Tạo biểu mẫu cơ bản

Hãy bắt đầu bằng cách tạo một biểu mẫu phản hồi đơn giản với một số điều khiển biểu mẫu cơ bản. Trong tệp thành phần của bạn (ví dụ: app.component.ts), nhập các lớp cần thiết:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input type="text" id="name" formControlName="name">

      <label for="email">Email:</label>
      <input type="email" id="email" formControlName="email">

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: '',
      email: '',
    });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

Trong ví dụ này, chúng tôi đang tạo một biểu mẫu có hai điều khiển biểu mẫu: name và email. Các formControlName thuộc tính trong HTML kết nối các điều khiển biểu mẫu này với myForm Ví dụ FormGroup.

Kiểm soát và xác thực biểu mẫu

Làm việc với Điều khiển biểu mẫu

Điều khiển biểu mẫu là khối xây dựng của các biểu mẫu phản ứng. Mỗi trường đầu vào tương ứng với một điều khiển biểu mẫu. Để truy cập và làm việc với các điều khiển này, chúng tôi sử dụng FormGroup và FormControl các lớp được cung cấp bởi ReactiveFormsModule của Angular.

Áp dụng trình xác thực

Xác nhận là một khía cạnh quan trọng của bất kỳ hình thức nào. Biểu mẫu phản ứng cung cấp một loạt trình xác thực tích hợp sẵn mà bạn có thể áp dụng cho các điều khiển biểu mẫu. Trình xác thực giúp đảm bảo rằng dữ liệu do người dùng nhập đáp ứng các tiêu chí cụ thể.

Ví dụ, để làm cho name trường bắt buộc, bạn có thể áp dụng Validators.required trình xác nhận:

import { Validators } from '@angular/forms';



this.myForm = this.fb.group({
  name: ['', Validators.required],
  email: '',
});

Hiển thị thông báo xác thực

Khi người dùng tương tác với một biểu mẫu, thông báo xác thực sẽ cung cấp phản hồi về lỗi nhập. Các dạng phản ứng của Angular cho phép bạn dễ dàng hiển thị các thông báo xác thực dựa trên trạng thái điều khiển. Cập nhật mẫu của bạn để bao gồm các thông báo xác thực:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">
  <div *ngIf="myForm.get('name').hasError('required') && myForm.get('name').touched">
    Name is required.
  </div>

  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
</form>

Trong ví dụ này, *ngIf chỉ thị kiểm tra xem name kiểm soát có required lỗi và đã được người dùng chạm vào. Nếu cả hai điều kiện đều được đáp ứng, thông báo xác thực sẽ được hiển thị.

Trường biểu mẫu động

Tạo các trường biểu mẫu một cách linh hoạt

Một trong những tính năng mạnh mẽ của Reactive Forms là khả năng tạo các trường biểu mẫu một cách linh hoạt. Điều này đặc biệt hữu ích khi xử lý các biểu mẫu có cấu trúc khác nhau dựa trên lựa chọn của người dùng hoặc dữ liệu động.

Để minh họa các biểu mẫu động, hãy xem xét một tình huống trong đó người dùng có thể thêm nhiều địa chỉ vào một biểu mẫu. Thay vì mã hóa cứng từng trường địa chỉ, chúng ta có thể tạo cấu trúc dựa trên mẫu để tạo các điều khiển biểu mẫu nếu cần.

<form [formGroup]="addressForm">
  <div formArrayName="addresses">
    <div *ngFor="let addressGroup of addressGroups.controls; let i = index" [formGroupName]="i">
      <label>Street:</label>
      <input form

ControlName="street">

      <label>City:</label>
      <input formControlName="city">

      <button (click)="removeAddress(i)">Remove</button>
    </div>
  </div>

  <button (click)="addAddress()">Add Address</button>
</form>

Ở đây, addressGroups FormArray chứa các phiên bản FormGroup riêng lẻ cho từng địa chỉ. Các *ngFor vòng lặp tự động tạo các điều khiển biểu mẫu cho từng địa chỉ.

FormArray: Quản lý mảng điều khiển biểu mẫu

Sản phẩm FormArray lớp là một loại chuyên biệt của FormGroup quản lý một mảng FormControl, FormGrouphoặc khác FormArray trường hợp. Trong ví dụ trên, addresses FormArray chứa nhiều FormGroup trường hợp, mỗi trường hợp đại diện cho một địa chỉ.

Để tạo ra một FormArray, bạn có thể dùng FormBuilder:

this.addressForm = this.fb.group({
  addresses: this.fb.array([]),
});

Thêm và xóa các trường biểu mẫu

Việc thêm và xóa các trường biểu mẫu động liên quan đến việc thao tác FormArray. Để thêm địa chỉ mới, bạn có thể sử dụng push() phương pháp:

addAddress() {
  const addressGroup = this.fb.group({
    street: '',
    city: '',
  });
  this.addresses.push(addressGroup);
}

Việc xóa một địa chỉ yêu cầu sử dụng removeAt() phương pháp:

removeAddress(index: number) {
  this.addresses.removeAt(index);
}

Gửi biểu mẫu và xử lý dữ liệu

Xử lý việc gửi biểu mẫu

Biểu mẫu phản ứng cung cấp một cách đơn giản để xử lý việc gửi biểu mẫu bằng cách sử dụng (ngSubmit) ràng buộc sự kiện. Khi biểu mẫu được gửi, hàm liên quan sẽ được gọi, cho phép bạn xử lý dữ liệu biểu mẫu.

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  

  <button type="submit">Submit</button>
</form>

Trong thành phần của bạn, xác định onSubmit() chức năng:

onSubmit() {
  if (this.myForm.valid) {
    
  }
}

Truy cập giá trị biểu mẫu

Để truy cập các giá trị được nhập vào các điều khiển biểu mẫu, bạn chỉ cần sử dụng .value tài sản của FormGroup or FormControl. Tuy nhiên, điều quan trọng cần lưu ý là thuộc tính này trả về một đối tượng có khóa tương ứng với tên điều khiển và giá trị đại diện cho đầu vào của người dùng.

onSubmit() {
  if (this.myForm.valid) {
    const formData = this.myForm.value;
    
  }
}

Đặt lại và cập nhật dữ liệu biểu mẫu

Việc đặt lại biểu mẫu về trạng thái ban đầu rất hữu ích sau khi gửi thành công hoặc khi người dùng hủy thao tác. Để đặt lại biểu mẫu, hãy sử dụng reset() phương pháp:

resetForm() {
  this.myForm.reset();
}

Nếu bạn muốn đặt lại biểu mẫu về một tập hợp giá trị cụ thể, bạn có thể chuyển một đối tượng tới reset() phương pháp:

resetFormToDefault() {
  this.myForm.reset({ name: '', email: '' });
}

Để cập nhật giá trị biểu mẫu theo chương trình, hãy sử dụng patchValue() or setValue() phương pháp:

updateFormValues() {
  this.myForm.patchValue({ name: 'John' });
}

Kỹ thuật tiên tiến

Xác thực chéo trường

Xác thực chéo trường liên quan đến việc xác thực nhiều trường cùng nhau, thường có các mối quan hệ phức tạp. Biểu mẫu phản ứng hỗ trợ loại xác thực này bằng cách cung cấp cách triển khai trình xác thực tùy chỉnh xem xét nhiều trường.

const passwordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const password = control.get('password');
  const confirmPassword = control.get('confirmPassword');

  if (!password || !confirmPassword) {
    return null;
  }

  return password.value === confirmPassword.value ? null : { passwordsNotMatch: true };
};

this.myForm = this.fb.group({
  
  password: '',
  confirmPassword: '',
}, { validator: passwordValidator });

Trong ví dụ này, passwordValidator kiểm tra xem mật khẩu và trường xác nhận mật khẩu có khớp nhau không.

Trình xác thực tùy chỉnh

Ngoài trình xác thực tích hợp, bạn có thể tạo trình xác thực tùy chỉnh để phù hợp với yêu cầu xác thực cụ thể của mình. Trình xác thực tùy chỉnh là một hàm đơn giản chấp nhận một FormControl làm đối số của nó và trả về một đối tượng lỗi xác thực nếu xác thực không thành công.

const customValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const value = control.value;
  if (value && value.includes('example')) {
    return { containsExample: true };
  }
  return null;
};

this.myForm = this.fb.group({
  
  customField: ['', customValidator],
});

Xác thực không đồng bộ

Đôi khi, việc xác thực yêu cầu các thao tác không đồng bộ, chẳng hạn như kiểm tra xem tên người dùng có sẵn trên máy chủ hay không. Biểu mẫu phản ứng hỗ trợ xác thực không đồng bộ bằng cách sử dụng asyncValidator thuộc tính khi xác định điều khiển biểu mẫu.

const asyncValidator: AsyncValidatorFn = (control: AbstractControl): Observable<ValidationErrors | null> => {
  return someAsyncCheck(control.value).pipe(
    map(result => result ? null : { notAvailable: true }),
    catchError(() => null) 
  );
};

this.myForm = this.fb.group({
  
  username: ['', [], [asyncValidator]],
});

Tương tác người dùng và phản hồi theo thời gian thực

Xác thực có điều kiện

Biểu mẫu phản ứng cho phép bạn áp dụng có điều kiện các quy tắc xác thực dựa trên thông tin đầu vào của người dùng. Điều này đặc biệt hữu ích khi bạn cần thay đổi các yêu cầu xác thực một cách linh hoạt.

this.myForm = this.fb.group({
  
  age: ['', [Validators.required]],
  hasLicense: [false],
});


this.myForm.get('hasLicense').valueChanges.subscribe(hasLicense => {
  const ageControl = this.myForm.get('age');
  if (hasLicense) {
    ageControl.setValidators([Validators.required, Validators.min(18)]);
  } else {
    ageControl.clearValidators();
  }
  ageControl.updateValueAndValidity();
});

Trong ví dụ này, age trường chỉ trở nên bắt buộc nếu người dùng cho biết rằng họ có giấy phép.

Cập nhật giao diện người dùng dựa trên biểu mẫu nhập

Biểu mẫu phản ứng cho phép bạn phản ứng với các thay đổi kiểm soát biểu mẫu và cập nhật giao diện người dùng tương ứng. Bạn có thể dùng valueChanges có thể quan sát để lắng nghe những thay đổi trong điều khiển biểu mẫu.

this.myForm.get('email').valueChanges.subscribe(newValue => {
  
});

Kỹ thuật này đặc biệt hữu ích trong việc cung cấp phản hồi theo thời gian thực cho người dùng khi họ tương tác với biểu mẫu.

Cung cấp phản hồi tức thì

Biểu mẫu phản ứng cho phép bạn cung cấp phản hồi tức thì cho người dùng khi họ điền vào biểu mẫu. Ví dụ: bạn có thể xác thực dữ liệu nhập của người dùng khi họ nhập và hiển thị thông báo xác thực ngay lập tức.

this.myForm = this.fb.group({
  
  email: ['', [Validators.required, Validators.email]],
});


this.myForm.get('email').valueChanges.subscribe(() => {
  const emailControl = this.myForm.get('email');
  if (emailControl.invalid && emailControl.touched) {
    this.emailError = 'Invalid email format';
  } else {
    this.emailError = '';
  }
});

Trong ví dụ này, emailError biến chứa thông báo xác nhận, được cập nhật

dựa trên tính hợp lệ của điều khiển email và sự tương tác của người dùng.

Các phương pháp hay nhất để sử dụng hiệu quả

Tách các mối quan tâm

Khi làm việc với Reactive Forms, điều cần thiết là phải tuân thủ nguyên tắc tách biệt các mối quan tâm. Giữ logic biểu mẫu của bạn tách biệt khỏi logic nghiệp vụ của thành phần và hiển thị chế độ xem. Cách thực hành này không chỉ làm cho cơ sở mã của bạn dễ bảo trì hơn mà còn cải thiện khả năng kiểm thử.

Nguyên tắc MECE trong thiết kế biểu mẫu

MECE (Loại trừ lẫn nhau, Toàn diện tập thể) là một nguyên tắc thường được sử dụng trong giải quyết vấn đề và quản lý dự án. Áp dụng nguyên tắc này để thiết kế biểu mẫu bằng cách đảm bảo rằng các điều khiển biểu mẫu bao gồm tất cả các tình huống có thể xảy ra mà không bị chồng chéo hoặc để lại khoảng trống.

Ví dụ: nếu bạn đang thiết kế biểu mẫu đăng ký người dùng, hãy đảm bảo bao gồm tất cả các trường cần thiết mà không bị dư thừa.

Cân nhắc khả năng tiếp cận

Trong khi xây dựng biểu mẫu, đặc biệt chú ý đến khả năng tiếp cận. Đảm bảo rằng người khuyết tật có thể sử dụng biểu mẫu của bạn bằng cách sử dụng ngữ nghĩa, nhãn và thuộc tính ARIA HTML thích hợp. Sử dụng độ tương phản cao và cung cấp hướng dẫn rõ ràng để nâng cao trải nghiệm tổng thể của người dùng.

Phần hỏi đáp

Câu hỏi 1: Tôi có thể kết hợp Biểu mẫu phản ứng và Biểu mẫu theo mẫu trong cùng một ứng dụng không?

Có, bạn có thể sử dụng cả Biểu mẫu phản ứng và Biểu mẫu dựa trên mẫu trong cùng một ứng dụng Angular. Tuy nhiên, bạn nên chọn một cách tiếp cận và kiên trì thực hiện nó để đạt được sự nhất quán.

Câu hỏi 2: Các hình thức phản ứng có phù hợp với các hình thức nhỏ, đơn giản không?

Biểu mẫu phản ứng có thể xử lý các biểu mẫu có kích thước và độ phức tạp bất kỳ. Mặc dù chúng có vẻ phức tạp hơn đối với các biểu mẫu nhỏ nhưng chúng mang lại những lợi ích như khả năng kiểm tra tốt hơn và phản hồi theo thời gian thực có thể nâng cao trải nghiệm người dùng ngay cả trong các tình huống đơn giản.

Câu hỏi 3: Làm cách nào để xử lý các thao tác không đồng bộ khi gửi biểu mẫu?

Để xử lý các hoạt động không đồng bộ trong quá trình gửi biểu mẫu, bạn có thể sử dụng switchMap toán tử từ RxJS để xâu chuỗi các hoạt động có thể quan sát được của bạn. Điều này cho phép bạn thực hiện cuộc gọi không đồng bộ và chỉ tiến hành gửi biểu mẫu khi hoàn tất các thao tác không đồng bộ.

import { switchMap } from 'rxjs/operators';



onSubmit() {
  if (this.myForm.valid) {
    this.someAsyncOperation()
      .pipe(
        switchMap(result => this.submitForm(result))
      )
      .subscribe(() => {
        
      });
  }
}

Kết luận

Các biểu mẫu phản ứng góc cung cấp một cách mạnh mẽ để xây dựng các biểu mẫu năng động, tương tác và được xác thực tốt. Từ đầu vào đơn giản của người dùng đến các kịch bản động phức tạp, Biểu mẫu phản ứng trao quyền cho nhà phát triển tạo ra trải nghiệm trực quan và thân thiện với người dùng. Bằng cách làm theo các phương pháp hay nhất và hiểu các sắc thái của quản lý kiểm soát biểu mẫu, xác thực và tương tác người dùng, bạn có thể tận dụng tối đa tính năng này và tạo các biểu mẫu tích hợp liền mạch với các ứng dụng Angular của mình.

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• PlatoData.Network Vertical Generative Ai. Trao quyền cho chính mình. Truy cập Tại đây.
• PlatoAiStream. Thông minh Web3. Kiến thức khuếch đại. Truy cập Tại đây.
• Trung tâmESG. Than đá, công nghệ sạch, Năng lượng, Môi trường Hệ mặt trời, Quản lý chất thải. Truy cập Tại đây.
• PlatoSức khỏe. Tình báo thử nghiệm lâm sàng và công nghệ sinh học. Truy cập Tại đây.
• nguồn: https://www.codementor.io/chintanonweb/angular-reactive-forms-mastering-dynamic-form-validation-and-user-interaction-28cln6pgqa