Angular 12 Forms: Cara menggunakan bentuk reaktif dan templat – Codewithaden

Bentuk sudut digunakan untuk menangani input pengguna. Kami dapat menggunakan formulir Angular dalam aplikasi kami untuk memungkinkan pengguna masuk, memperbarui profil, memasukkan informasi, dan melakukan banyak tugas masuk data lainnya.

Jika Anda baru di Angular, maka periksa saya Tutorial sudut . Jika Anda tidak tahu cara meningkatkan ke Angular 12 melalui Angular CLI, lihat saya Upgrade Angular tutorial. Mengelola input pengguna dengan formulir adalah landasan dari banyak aplikasi web.

Aplikasi Web menggunakan formulir untuk memungkinkan pengguna masuk, memperbarui profil, memasukkan informasi sensitif, dan melakukan banyak tugas masuk data.

Sudut 12 bentuk

Angular menyediakan dua pendekatan berbeda untuk mengelola input pengguna melalui formulir.

  1. Pendekatan reaktif
  2. Pendekatan yang digerakkan template

Formulir reaktif dan digerakkan template berbagi blok bangunan standar yang mendasarinya: berikut ini.

  1. FormControl: Ini melacak nilai dan status validasi kontrol formulir individu.

  2. Formgroup Ini melacak nilai dan status yang sama untuk pengumpulan kontrol formulir.
  3. Formarray Ini melacak nilai dan status yang sama untuk array kontrol formulir.
  4. ControlValueAccessor Ini menciptakan jembatan antara instance formcontrol sudut dan DOM asli elemen.

Oke, sekarang, mari kita mulai dengan jenis bentuk sudut.

Angular 12 bentuk reaktif

Bentuk reaktif atau bentuk yang digerakkan model lebih kuat, dapat diukur, dapat digunakan kembali, dan dapat diuji. Jika formulir adalah bagian utama dari aplikasi Anda, atau Anda sudah menggunakan pola reaktif untuk membangun aplikasi web Anda, gunakan formulir reaktif.

Dalam bentuk reaktif, sebagian besar pekerjaan dilakukan di kelas komponen.

Angular 12 Bentuk yang digerakkan template

Formulir yang digerakkan template membantu menambahkan formulir sederhana ke aplikasi, seperti formulir pendaftaran daftar email. Mereka mudah ditambahkan ke aplikasi web, tetapi mereka tidak skala dan bentuk reaktif.

Jika Anda memerlukan bentuk dan logika dasar yang dapat dikelola semata-mata dalam templat, gunakan bentuk yang digerakkan template.

Dalam bentuk yang digerakkan template, sebagian besar pekerjaan dilakukan dalam templat.

Contoh bentuk yang digerakkan template dalam sudut

Oke, sekarang mari kita instal aplikasi sudut segar.

Lalu pergi ke app.module.ts mengajukan dan menambahkan kode berikut.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

Kami telah mengimpor Formsmodule dari @ sudut/bentuk perpustakaan di file di atas.

Sekarang, kita dapat menggunakan Formsmodule di dalam kita app.component.ts mengajukan.

// app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
   constructor() { }
   ngOnInit() {
   }
   onClickSubmit(formData) {
      alert('Your Email is : ' + formData.email);
   }
}
 

Dalam file ini, kami telah menentukan fungsi OnClickSubmit, yang akan memicu ketika pengguna mengklik tombol Kirim pada formulir.

Fungsi tersebut juga menerima satu argumen yang disebut Formdata, objek dari seluruh nilai bentuk.

Melalui itu formdata objek, kita dapat mengakses semua nilai bidang formulir. Dalam kasus kami, saya hanya perlu ID email pengguna.

Dalam skenario umum, kami ingin meneruskan objek itu ke Permintaan Posting ke server backend untuk menyimpan data pengguna.

Sekarang, satu -satunya hal yang tersisa adalah menulis HTML komponen aplikasi. Jadi, tulis kode berikut di dalam app.component.html mengajukan.



Kami telah membuat formulir web dengan tag input dengan email, kata sandi, dan kirim tombol. Menangkan tambahan, kami telah menetapkan jenis atribut jenis, nama, dan placeholder untuk itu.

Kita perlu membuat kontrol bentuk model dalam bentuk yang digerakkan template dengan menambahkan Ngmodel arahan dan nama atribut.

Jadi, seperti yang ditunjukkan di atas, kapan pun kami ingin Angular mengakses data kami dari formulir, tambahkan Ngmodel ke tag itu. Contoh ifor, jika kita harus membaca email dan kata sandi, kita perlu menambahkan Ngmodel di seberangnya.

Melihat erat pada formulir, kami juga telah menambahkan NGFORM ke #Gabung . Itu NGFORM Petunjuk perlu ditambahkan ke templat formulir yang telah kami buat.

Akhirnya, kami juga telah menambahkan fungsinya OnClickSubmit dan ditugaskan Login.Value untuk itu.

Simpan file dan mulai server pengembangan sudut dengan perintah berikut.

ng serve -o 

Anda akan melihat layar browser dengan formulir login. Sekarang isi formulir, dan Anda akan melihat sesuatu seperti gambar berikut.

Angular

Jadi, itu untuk bentuk yang digerakkan template dalam sudut 12.

Bentuk model yang digerakkan atau reaktif dalam sudut

Dalam bentuk model yang digerakkan, kita perlu mengimpor reactiveFormsmodule dari @angular/forms dan menggunakan yang sama di impor Himpunan.

Ada perubahan yang masuk app.module.ts. Lihat app.module.ts mengajukan.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

Dalam app.component.ts File, kita perlu mengimpor beberapa modul untuk formulir yang digerakkan oleh model. Sebagai contoh, impor {formgroup, formbuilder} dari ‘@angular/forms’

Membentuk kontrol dan membentuk kelompok dalam sudut

Kontrol formulir adalah kelas yang dapat menahan nilai data dan informasi validasi dari elemen bentuk apa pun, yang berarti kontrol formulir harus mengikat setiap input bentuk yang Anda miliki dalam bentuk reaktif. Mereka adalah unit dasar yang membentuk bentuk reaktif.

Grup bentuk adalah konstruksi yang membungkus kumpulan kontrol bentuk. Sama seperti kontrol memberi Anda akses ke keadaan elemen, grup menyediakan akses yang sama dan keadaan kontrol yang dibungkus. Setiap kontrol formulir dalam grup bentuk diidentifikasi dengan nama saat menginisialisasi.

Komponen aplikasi validasi bentuk reaktif

Komponen APP mendefinisikan bidang formulir dan validator untuk formulir pendaftaran kami menggunakan Formbuilder Angular untuk membuat instance dari FormGroup yang disimpan dalam properti Angform.

Angform terikat pada formulir dalam templat aplikasi di bawah ini menggunakan arahan [FormGroup].

Anda juga dapat menambahkan fungsi Getter sebagai properti kenyamanan untuk membuatnya lebih mudah untuk mengakses kontrol formulir dari templat. Saya belum menambahkannya, tetapi Anda bisa menambahkannya.

Lihat yang berikut app.component.ts mengajukan.

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  angForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.angForm = this.fb.group({
      email: [''],
      password: ['']
    });
  }
  onClickSubmit(email, password) {
    alert('Your Email is : ' + email);
  }
   ngOnInit() {
   }
}
 

Dalam kode di atas, kami telah menggunakan FormBuilder untuk membuat formulir dan menginisialisasi nilai dua bidang kosong. Untuk mendaftarkan pembangun formulir dalam komponen, hal pertama yang harus dilakukan adalah mengimpornya dari bentuk sudut.

Langkah selanjutnya adalah menyuntikkan Layanan Pembangun Formulir, penyedia yang dapat disuntikkan dengan modul Formulir Reaktif. Anda kemudian dapat menggunakan pembangun formulir setelah menyuntikkannya.

Kami juga telah mendefinisikan satu fungsi yang disebut OnClickSubmit (), yang menerima dua parameter surel dan kata sandi.

Pembangun formulir tidak hanya membantu membuat kode reaktif Anda menjadi efisien, tetapi juga penting untuk validasi formulir.

Jadi, ketika pengguna menekan tombol kirim, kami mendapatkan nilai di sini, dan kemudian kami mengirim nilai -nilai ini dengan permintaan POST ke server backend.

Template Aplikasi Validasi Formulir Reaktif

Template komponen aplikasi berisi semua markup HTML untuk menampilkan formulir pendaftaran contoh di browser Anda.

Elemen formulir menggunakan arahan [FormGroup] untuk mengikat ke FormGroup registerForm di komponen aplikasi di atas.

Kami telah menentukan acara klik tombol kirim pada markup tombol.

Saat pengguna mengklik tombol Kirim, fungsi OnClickSubmit () akan dipanggil dari komponen aplikasi dengan nilai surel dan kata sandi sebagai parameter.

Anda juga dapat mendefinisikan formulir mengirimkan acara ke pawang onsubmit () dalam komponen aplikasi menggunakan event event angular (ngsubmit) = “onsubmit ()”.

Tapi kami tidak akan pergi untuk pendekatan ini. Kami akan pergi untuk acara klik tombol dan bukan formulir untuk mengirimkan suatu acara.

Pesan validasi ditampilkan hanya setelah pengguna mencoba mengirimkan formulir untuk pertama kalinya, dan ini dikendalikan dengan properti yang dikirimkan dari komponen aplikasi.

Akhirnya, tulis app.component.html mengajukan.



Sekarang, simpan file di atas dan buka aplikasi Angular, dan Anda akan melihat output yang sama seperti yang kami miliki dalam pendekatan yang digerakkan template.

Salah satu keuntungan dari pendekatan yang digerakkan oleh model adalah bahwa validasi menjadi sangat mudah.

Kesimpulan

Artikel ini memberikan gambaran tentang pembangun formulir dan enabler efisiensi yang hebat untuk kontrol formulir dan kelompok bentuk.

Ini juga menunjukkan betapa pentingnya untuk menangani validasi bentuk secara efisien dengan bentuk reaktif.

Juga, kita telah melihat bentuk 12 template sudut dan bentuk reaktif dengan contoh.

Akhirnya, kami telah melihat kedua pendekatan tersebut. Itu untuk tutorial ini.

Posting yang disarankan

Angular ngclass

Unggah file sudut

HTTPClient Angular

Observable sudut

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *