Angular 6|7|8 Forms: Reactive Forms Tutorial and Example

Trong phần hướng dẫn này của loạt bài Angular 6 | 7 | 8, chúng ta sẽ học cách sử dụng các biểu mẫu bằng cách tạo một ví dụ đơn giản bằng cách sử dụng phương pháp biểu mẫu phản ứng.

Chúng ta sẽ xem cách sử dụng API Angular FormBuilder, Formgroup và FormControl để dễ dàng xây dựng một biểu mẫu.

Lưu ý: Để biết ví dụ từng bước đầy đủ hơn với xác thực, hãy xem Hướng dẫn Angular 7: Ví dụ về hình thức đăng nhập và phản ứng với xác thực

Các Forms trong Angular được sử dụng trong hầu hết các ứng dụng web vì chúng cho phép người dùng gửi đầu vào khi tương tác với ứng dụng. Trong vô số trường hợp sử dụng, chúng rất hữu ích để đăng nhập người dùng, tìm kiếm thông tin và gửi phản hồi.

Angular cung cấp hai cách tiếp cận, các biểu mẫu dựa trên mẫu và các biểu mẫu dựa trên mô hình hoặc phản ứng, để làm việc với các biểu mẫu:

Cách tiếp cận hướng mẫu sử dụng các chỉ thị tích hợp để xây dựng các biểu mẫu như ngModel, ngModelgroup và ngForm có sẵn từ mô-đun FormsModule.

Cách tiếp cận hướng mô hình của việc tạo biểu mẫu trong Angular 6 giúp sử dụng FormControl, Formgroup và FormBuilder từ mô-đun ReactiveFormsModule.

Hướng dẫn này giả định rằng bạn đã có một thiết lập dự án Angular. Nếu bạn không, hãy đảm bảo bạn làm theo hướng dẫn bắt đầu, hướng dẫn bạn cách tạo dự án Angular bằng Angular CLI

Tạo dự án Angular 6|7|8

Bạn cần tạo dự án Angular 6 | 7 bằng Angular CLI 6 | 7:

ng new FormsAngular

Angular Reactive/Model Driven Forms
Trong hướng dẫn này, chúng tôi sẽ tạo một mẫu HTML mẫu. Sau đó, chúng tôi tạo một mô hình biểu mẫu trong thành phần ứng dụng bằng cách sử dụng các lớp Formgroup và FormControl.

Cuối cùng, chúng tôi sẽ sử dụng các chỉ thị formgroup, formControlName và formgroupName để liên kết mô hình biểu mẫu của chúng tôi với biểu mẫu HTML của chúng tôi.
Importing the ReactiveFormsModule Module
Mở tệp src / app / app.module.ts và nhập mô-đun ReactiveFormsModule.

import { ReactiveFormsModule } from '@angular/forms';
imports: [
  ... 
  ReactiveFormsModule
],

Tiếp theo, hãy nhập các lớp FormControl và Formgroup trong tệp src / app / app.component.ts.

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  exampleForm = new FormGroup ({
    firstName: new FormControl(),
    lastName: new FormControl(),
  });
}

Chúng tôi tạo một thể hiện exampleForm của Formgroup với hai điều khiển biểu mẫu FirstName và lastName.
Tiếp theo, chúng ta có thể cần tạo một biểu mẫu trong tệp src / app / app.component.html:

<h1>Angular 7 Forms Example</h1>
<form [formGroup]="exampleForm">
  <div class="form-group">
    <label>First Name:</label>
      <input class="form-control" formControlName="firstName">
    <label>Last Name:</label>
          <input class="form-control" formControlName="lastName">
  </div>
</form>

Chúng tôi sử dụng thuộc tính formgroup trong thẻ <form> để liên kết biểu mẫu với nhóm biểu mẫu exampleForm của chúng tôi và chúng tôi sử dụng thuộc tính formControlName để liên kết thẻ <input> với các điều khiển biểu mẫu riêng lẻ.

Sử dụng Mô-đun FormBuilder

Lớp FormBuilder giúp bạn tạo các điều khiển.

Bên trong tệp src / app / ap.component.ts nhập lớp FormBuilder từ gói @ angular / Forms:

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

Tiếp theo thêm FormBuilder vào hàm tạo thành phần dưới dạng formBuilder
Tiếp theo thêm phương thức createForm () với đoạn mã sau:

createForm() {
    this.exampleForm = this.formBuilder.group({
      firstName: '',
      lastName: ''
    });
}

Cuối cùng gọi phương thức từ hàm tạo:

 constructor(private formBuilder: FormBuilder) {
      this.createForm();
  }