Apa itu Pengikatan Dua Arah di Angular?

Pengikatan dua arah memungkinkan pengguna untuk memasukkan data dari file HTML dan mengirimkannya ke file TypeScript dan sebaliknya. Ini berguna untuk validasi input, manipulasi, dan lainnya.

Setelah Anda mengirimkan data dari HTML ke file TypeScript, Anda dapat menggunakan data tersebut untuk menyelesaikan logika bisnis tertentu. Contoh skenarionya adalah jika Anda ingin memeriksa apakah nama yang dimasukkan ke kolom input sudah ada.

Bagaimana Cara Menggunakan Penjilidan Dua Arah?

Pengikatan dua arah di aplikasi Angular biasanya diatur di .html file, menggunakan ngModel pengarahan. Pengikatan dua arah dalam formulir input dapat terlihat seperti ini:

<memasukkan 
 jenis="surel"
 id="surel"
 nama="surel"
 placeholder="[email protected]"
 [(Model)]="alamat email"
/>

Dalam .ts berkas, alamat email variabel terikat ke alamat email dari formulir.

Alamat email: String = ''; 

Cara Mengatur Formulir Contoh di Aplikasi Angular

Dengan membuat aplikasi dasar, Anda dapat menggunakan pengikatan dua arah untuk memeriksa apakah nama pengguna potensial sudah ada.

1. Membuat aplikasi sudut baru.
2. Jalankan ng menghasilkan komponen perintah untuk membuat komponen baru. Di sinilah Anda akan menyimpan formulir.

   ng menghasilkan formulir nama pengguna-pemeriksa komponen

3. Ganti semua kode di app.component.html file dengan tag berikut:

   <app-username-checker-form></app-username-checker-form>

4. Tambahkan CSS berikut ke dalam komponen baru Anda .css berkas, terletak di username-checker-form.component.css, untuk memberi gaya pada formulir:

   .wadah {
    tampilan: fleksibel;
    perataan teks: tengah;
    justify-content: center;
    menyelaraskan-item: tengah;
    tinggi: 100vh;
   }
   .kartu {
    lebar: 50%;
    background-color: peachpuff;
    border-radius: 1rem;
    bantalan: 1rem;
   }
   memasukkan {
    berbatasan: 3px padat #1a659e;
    border-radius: 5px;
    tinggi: 50px;
    garis-tinggi: normal;
    warna: #1a659e;
    tampilan: blok;
    lebar: 100%;
    ukuran kotak: kotak batas;
    pengguna-Pilih: mobil;
    ukuran font: 16px;
    padding: 0 6px;
    padding-kiri: 12px;
   }
   memasukkan:fokus {
    berbatasan: 3px padat #004e89;
   }
   .btn {
    tampilan: blok;
    garis besar: 0;
    kursor: penunjuk;
    berbatasan: 2px padat #1a659e;
    border-radius: 3px;
    warna: #fff;
    latar belakang: #1a659e;
    ukuran font: 20px;
    font-berat: 600;
    garis-tinggi: 28px;
    padding: 12px 20px;
    lebar: 100%;
    margin atas: 1rem;
   }
   .btn:arahkan {
    latar belakang: #004e89;
    berbatasan: #004e89;
   }
   .kesuksesan {
    warna: #14ae83;
   }
   .kesalahan {
    warna: #fd536d;
   }

5. Tambahkan CSS berikut ke dalam src/styles.css untuk mengatur jenis font, latar belakang, dan warna teks dari keseluruhan aplikasi:

   @impor url("https://fonts.googleapis.com/css2?family=Poppins: wght@300;400&tampilan=tukar");
   tubuh {
    keluarga font: "Poppin";
    background-color: pepayawhip;
    warna: #1a659e;
   }

6. Ganti kode di username-checker-form.component.html, untuk menambahkan formulir pemeriksa nama pengguna:

   <kelas div="wadah">
   <kelas div="kartu">
   <h1> Pemeriksa nama pengguna </h1>
   <membentuk>
   <memasukkan
    jenis="teks"
    id="nama belakang"
    nama="nama belakang"
    placeholder="Masukkan nama pengguna"
    />
   <kelas tombol="btn"> Menyimpan </button>
   </form>
   </div>
   </div>

7. Jalankan aplikasi Anda menggunakan perintah ng serve di terminal.

   melayani

8. Lihat aplikasi Anda di http://localhost: 4200/.

Mengirim Data Antara File HTML dan TypeScript

Gunakan pengikatan dua arah untuk mengirim data ke .ts file dan kembali ke .html mengajukan. Ini dimungkinkan dengan penggunaan ngModel dalam bentuk memasukkan tag.

1. Impor FormsModule ke dalam app.module.ts file, dan menambahkannya ke impor Himpunan:

   impor { FormsModul } dari '@sudut/bentuk';
   @NgModul({
   //...
    impor: [
   // impor lainnya
    FormsModule
    ],
   //...
   })

2. Deklarasikan a nama belakang variabel kelas di .ts mengajukan, username-checker-form.component.ts:

   nama pengguna: string = '';

3. Di dalam username-checker-form.component.html, menambahkan [(Model)] dengan nama belakang variabel dalam tag input. Ini memungkinkan pengikatan dua arah, dan apa pun yang diketikkan ke input nama pengguna formulir akan ditetapkan ke variabel nama pengguna di .ts mengajukan.

   <memasukkan
    jenis="teks"
    id="nama belakang"
    nama="nama belakang"
    placeholder="Masukkan nama pengguna"
    [(Model)]="nama belakang"
   />

4. Untuk menguji bahwa data sedang dikirim ke .ts file, buat menyimpan() metode di username-checker-form.component.ts. Saat Anda mengirimkan formulir, aplikasi akan memanggil fungsi ini.

   menyimpan(): ruang kosong {
   menghibur.catatan(ini.nama belakang);
   }

5. Tambahkan kirim direktif ke
   tag masuk username-checker-form.component.html, dan panggil metode save() .

   <formulir (ngKirim)="menyimpan()">

6. Saat mengklik tombol Simpan, file menyimpan() fungsi akan mencetak nilai yang dimasukkan ke kolom input ke konsol. Anda dapat melihat konsol saat runtime menggunakan alat pengembang browser. Jika Anda tidak terbiasa dengan DevTools browser atau melihat konsol, Anda dapat mempelajari lebih lanjut cara menggunakan Chrome DevTools.
7. Kirim nama belakang kembali ke .html mengajukan. Tambahkan variabel nama pengguna di antara tanda kurung kurawal ke username-checker-form.component.html berkas, setelah
   tag. Gunakan kurung kurawal untuk menampilkan nilai yang disimpan dalam variabel nama pengguna.

   <h2 *ngJika="nama belakang"> Nama pengguna dimasukkan: {{ nama pengguna }} </h2>

   Formulir harus menunjukkan data yang dimasukkan secara bersamaan.
8. Di dalam username-checker-form.component.ts, tambahkan beberapa variabel kelas untuk memeriksa apakah nama pengguna sudah ada. Deklarasikan a nama pengguna array dengan beberapa nama pengguna yang diambil, dan tambahkan a pesan string yang menginformasikan pengguna cek. Variabel isValidUsername benar jika nama pengguna yang dimasukkan tidak ada dalam larik nama pengguna.

   nama pengguna: string[] = [ 'bart', 'lisa', 'menggoreng', 'leela' ];
   pesan: string = '';
   isValidUsername: boolean = PALSU;

9. Itu menyimpan() metode harus memeriksa apakah nama pengguna yang dimasukkan sudah ada dalam larik nama pengguna yang ada atau tidak. Bergantung pada hasilnya, pesan akan diatur sesuai.

   menyimpan(): ruang kosong {
    jika (ini.nama pengguna != '') {
   ini.isValidUsername = !ini.namapengguna.termasuk(
   ini.nama belakang.toLowerCase()
    );
   jika (ini.isValidUsername) {
   ini.pesan = `Nama pengguna baru Anda adalah '${ini.nama belakang}'`;
    } kalau tidak {
   ini.pesan = `Nama pengguna '${ini.nama belakang}' telah diambil`;
    }
    }
   }

10. Menyelesaikan username-checker-form.component.html file dengan menunjukkan apakah nama pengguna yang dimasukkan ada atau tidak. Tambahkan pesan kesalahan di bawah

    tag setelah formulir. Itu isValidUsername variabel sangat membantu di sini untuk menentukan warna pesan yang ditampilkan.

    <p *ngJika="nama belakang" [ngClass]="apakah nama pengguna yang valid? 'kesuksesan': 'kesalahan'">
     {{ pesan }}
    </P>

11. Di browser Anda di host lokal: 4200, coba masukkan nama pengguna yang ada di larik nama pengguna: Kemudian, coba masukkan nama pengguna yang tidak.

Menggunakan Pengikatan Dua Arah untuk Mengirim Data Saat Mengembangkan Aplikasi

Pengikatan dua arah berguna untuk validasi, pemeriksaan, penghitungan, dan lainnya. Hal ini memungkinkan komponen untuk berkomunikasi dan berbagi data secara real-time.

Anda dapat menggunakan fitur pengikatan dua arah di berbagai bagian aplikasi. Setelah Anda menerima data dari pengguna, Anda dapat menjalankan logika bisnis dan memberi tahu pengguna tentang hasilnya.

Terkadang, Anda ingin menyimpan data pengguna dalam database. Anda dapat mempelajari berbagai jenis penyedia database yang dapat Anda gunakan, termasuk Firebase NoSQL Database.