Bentuk reaktif sudut: bentuk reaktif dalam sudut 13 – Codewithaden

Bentuk reaktif sudut atau pendekatan yang digerakkan oleh model adalah cara lain untuk membangun bentuk dalam sudut. Dalam bentuk reaktif sudut, bentuknya dibangun di kelas komponen. Yang memungkinkan Anda memiliki kontrak yang formulir Anda Berlangganan perubahan nilai lapangan dan pada akhirnya Test unit logika formulir Anda tanpa lapisan UI.

Perbedaan antara bentuk yang digerakkan oleh template dan bentuk yang digerakkan model (bentuk reaktif)

Bentuk yang digerakkan template memberi kita cara yang mudah untuk bangun dan berjalan, Sedangkan model-driven memungkinkan Anda untuk mengambil formulir Anda Ke mana pun mereka harus pergi. modul, alih -alih modul Forms.

Kita perlu memperbarui modul aplikasi untuk mengimpor dan gunakan itu alih -alih modul Formulir.

Sekarang, agar Anda tahu, adalah mungkin untuk mengimpor keduanya jika Anda Modul menggunakan kedua template dan bentuk yang digerakkan oleh model atau bentuk reaktif.

Bentuk reaktif berbeda dari bentuk yang digerakkan template dalam banyak hal. Misalnya, bentuk reaktif memberikan lebih banyak prediktabilitas dengan akses sinkron ke model data, keabadian dengan operator yang dapat diamati, dan mengubah pelacakan melalui aliran yang dapat diamati.

Jika Anda lebih suka akses langsung untuk memodifikasi data dalam templat Anda, formulir yang digerakkan template kurang eksplisit karena mengandalkan arahan yang tertanam dalam templat, bersama dengan data yang dapat berubah untuk melacak perubahan secara tidak sinkron.

Jika Anda baru di Angular 13, saya sangat merekomendasikan memeriksa tutorial berikut.

Tingkatkan CLI Angular

Contoh CRUD Angular

Angular 13 bentuk reaktif

Bentuk reaktif menggunakan pendekatan eksplisit dan abadi untuk mengelola keadaan formulir pada titik waktu tertentu. Dengan demikian, setiap perubahan ke status formulir mengembalikan keadaan baru, yang mempertahankan integritas model antara perubahan.

Bentuk reaktif dibangun di sekitar aliran yang dapat diamati, di mana input dan nilai bentuk disediakan sebagai aliran nilai input, yang dapat diakses secara sinkron.

Formulir reaktif juga menyediakan jalur langsung untuk pengujian karena Anda yakin bahwa data Anda konsisten dan dapat diprediksi ketika diminta. Selain itu, setiap konsumen aliran memiliki akses untuk memanipulasi data itu dengan aman.

e akan membuat a grup bentuk obyek. Ingat formulir dari Template-Driven mendekati Bahwa sistem bentuk sudut bekerja dengan grup bentuk di Paket Singkapan Bentuk Angular. Kami membutuhkan properti kelas untuk formulir.

Bagian ini menjelaskan cara menambahkan kontrol bentuk tunggal.

Dalam contoh, pengguna memasukkan nama mereka ke dalam bidang input, menangkap nilai input itu, dan menampilkan nilai saat ini dari elemen kontrol formulir.

Mari kita pelajari cara menggunakan bentuk reaktif dalam sudut 13.

Langkah 1: Mendaftarkan Modul Formulir Reaktif

Untuk menggunakan bentuk reaktif, impor reactiveFormsmodule dari @Angular/Forms Paket dan tambahkan ke array impor NGModule Anda.

// app.module.ts

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

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { } 

Langkah 2: Mengkonfigurasi Formgroup dan FormControl

Tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

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

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

Itu FormControl Kelas adalah blok bangunan dasar saat menggunakan bentuk reaktif. Untuk mendaftarkan kontrol formulir tunggal, impor FormControl Kelas ke dalam komponen Anda, dan buat instance baru dari kontrol formulir untuk disimpan sebagai properti kelas.

Sama seperti instance kontrol formulir memberi Anda kontrol atas bidang input tunggal, instance grup formulir melacak status bentuk kelompok instance kontrol bentuk (misalnya, formulir). Saat membuat grup formulir, setiap kontrol dalam instance grup Form dilacak dengan nama.

Untuk memanfaatkan acara siklus hidup, Anda perlu menambahkan nama fungsi yang diketahui ke kelas Anda, dan Angular akan menangani menyebutnya Jika ada di kelas Anda.

Kami juga dapat menggunakan antarmuka TypeScript di sini, bernama Oninit, sudut itu menyediakan untuk membantu menegakkan implementasi. Jadi mari kita masuk ke impor Pernyataan dari sudut sudut. Kemudian tambahkan implementasi onInit setelah nama kelas. Lalu kita bisa menambahkan Ngoninit metode.

Kami akan membuat dua bidang bentuk, yang merupakan sebagai berikut.

1) nama pasien

2) Patient_age

Kontrol bentuk individu sekarang dikumpulkan dalam suatu kelompok. SEBUAH Formgroup Contoh memberikan nilai modelnya sebagai objek yang dikurangi dari nilai masing -masing kontrol dalam grup. Dengan demikian, instance grup bentuk memiliki sifat yang sama (seperti nilai dan tidak tersentuh) dan metode (seperti setValue ()) sebagai instance kontrol formulir.

Anda juga dapat menggunakan konstruktor FormControl untuk menetapkan nilai awalnya, yang dalam hal ini, adalah string kosong. Dengan membuat kontrol ini di kelas komponen Anda, Anda mendapatkan akses langsung untuk mendengarkan, memperbarui dan memvalidasi status input formulir.

Untuk contoh ini, saya tidak akan menggunakan konstruktor, tetapi saya akan menggunakan metode siklus hidup yang disebut Ngoninit () metode.

 / app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  ngOnInit() {
    this.form = new FormGroup({
      patient_name: new FormControl(''),
      patient_age: new FormControl(''),
    });
  }
} 

Kami telah menetapkan nilai awal nama pasien dan Patient_age untuk mengosongkan.

Langkah 3: Mendaftarkan Kontrol di Templat

Setelah membuat kontrol di kelas komponen, Anda harus mengaitkannya dengan elemen kontrol formulir dalam templat. Kemudian, perbarui templat dengan kontrol formulir menggunakan FormControl mengikat yang disediakan oleh FormControldirective termasuk dalam ReactiveFormsmodule

Tulis kode di dalam app.component.html mengajukan.



Pertama, kita perlu memberi tahu Angular itu Kami memiliki model untuk formulir. Jadi di Bentuk braket grup, Pengaturan yang setara dengan membentuk Atau nama apa pun yang Anda suka.

Menggunakan sintaks pengikat template, kontrol formulir sekarang terdaftar ke template nama pasien dan Patient_age elemen input.

Kontrol formulir dan elemen DOM berkomunikasi satu sama lain: tampilan mencerminkan perubahan dalam model, dan model mencerminkan perubahan dalam tampilan.

Langkah 4: Tambahkan formulir Kirim formulir

Sekarang, tambahkan ngsubmit () peristiwa dalam bentuk.



Jadi, ketika pengguna mengklik tombol Kirim, kami mendapatkan semua nilai elemen formulir dan mengirimkannya ke server.

Akhirnya, buat fungsi yang disebut OnClickSubmit (Form.Value) di dalam app.component.ts mengajukan.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  ngOnInit() {
    this.form = new FormGroup({
      patient_name: new FormControl(''),
      patient_age: new FormControl(''),
    });
  }
  onClickSubmit(formData) {
    console.log('Coronal Effected Patient name is : ' + formData.patient_name);
    console.log('Coronal Effected Patient age is : ' + formData.patient_age);
  }
}
 

Di sini, kami mendapat data formulir.

Jika kami ingin mengirimkannya ke server, kami dapat menggunakan HttpClientModule Angular 13 Untuk mengirim permintaan jaringan ke server.

Kesimpulan

Untuk mengimplementasikan bentuk reaktif di Angular 13, kami mengikuti langkah -langkah di bawah ini.

  1. Impor modul Formulir Reaktif di file app.module.ts.
  2. Buat instance kelas FormGroup dalam file komponen dan inisialisasi nilai default dari semua FormControls.
  3. Bind FormGroup dan FormConrtol dalam kode HTML.

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 *