Angular Ngmodel: Panduan Lengkap – Codewithaden

Menggunakan ikatan dua arah, kami dapat menampilkan properti data dan memperbarui properti itu ketika pengguna itu membuat perubahan. Ikatan dua arah memberikan komponen dalam aplikasi Anda cara untuk berbagi data.

Anda dapat mendengarkan acara dan memperbarui nilai secara bersamaan antara komponen orang tua dan anak menggunakan pengikatan dua arah.

Angular ngmodel

Angular Ngmodel adalah arahan bawaan yang membuat instance FormControl dari model domain dan mengikatnya ke elemen kontrol bentuk. Itu Ngmodel Petunjuk mengikat nilai Html kontrol ( Input, pilih, TextArea ) ke data aplikasi.

Kita hanya bisa mencapainya di elemen komponen dan Html elemen keduanya. Ikatan dua arah menggunakan sintaksis sebagai [()] atau mengikat- kata kunci.

Ikatan dua arah menggunakan sintaks pengikatan properti dan pengikatan acara bersama. Ikatan properti menggunakan sintaks sebagai braket [] atau mengikat- dan pengikatan peristiwa menggunakan sintaks sebagai tanda kurung () atau pada- dan binding ini dianggap mengikat satu arah.

Pekerjaan pengikatan dua arah di kedua arah mengatur nilai dan mengambil nilai. Ikatan dua arah menggunakan pola nama tertentu.

Oke, mari kita menginstal Angular menggunakan CLI Angular

Langkah 1: Pasang Angular menggunakan sudut CLI.

Ketik perintah berikut untuk menginstal Angular

npm install -g @angular/cli 

Sekarang, hasilkan proyek sudut menggunakan perintah berikut.

ng new model 

Ini akan membuat boilerplate sudut.

Sekarang, impor Formsmodule di dalam app.module.ts mengajukan.

// 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 { }
 

Langkah 2: Buat model AppData

Dalam SRC >> Aplikasi folder, buat file yang dipanggil AppData.ts dan tambahkan kode berikut.

// AppData.ts

export class AppData {
  constructor(
      public name: String
  ) {}
}
 

Jadi, di sini kami telah mengambil satu properti yang disebut nama, jenisnya Rangkaian

Sekarang, impor file model ini di dalam app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';
import { AppData } from './AppData';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  data = new AppData('');
}
 

Langkah 3: Tambahkan kode HTML

Oke, jadi untuk mengerjakan data dua arah yang mengikat dengan benar dengan ngmodel, kita perlu menulis kode berikut di dalam app.component.html mengajukan.



Hello {{ data.name }}!

  • Untuk setiap memasukkan Tag, kami gunakan Ngmodel Arahan untuk mengikat data dengan sintaks: [(ngModel)] = "data.name" ( Data aplikasi adalah model data dalam app.component.ts ) kelas
  • Menambahkan a nama atribut ke memasukkan menandai. Itu adalah persyaratan saat menggunakan [(ngmodel)] dalam kombinasi dengan formulir.

Simpan file dan buka http://localhost:4200

Anda dapat melihat bahwa menggunakan arahan ngmodel, dan kami dapat melakukan pengikatan data dua arah.

Memahami Ngmodel

Melihat kode sumber, kami akan melihat itu Ngmodel Dilengkapi dengan ikatan properti.

Mengikat properti [Ngmodel] menangani memperbarui input yang mendasarinya Dom elemen.

Angular memungkinkan sintaks steno menggunakan [()] , disebut juga ” Pisang dalam sebuah kotak “.

Jadi, bagaimanapun juga, ini adalah detail implementasi Ngmodel Itu memungkinkan pengikatan data dua arah.

Referensi variabel template

PengidentifikasiPenggunaan
Ngmodel#mytemplatevar = ” Ngmodel

Instance FormControl melacak nilai, interaksi pengguna, dan status validasi kontrol dan membuat tampilan disinkronkan dengan model. Jika digunakan dalam bentuk induk, arahan juga mendaftarkan dirinya sebagai bentuk kontrol anak.

Petunjuk ini digunakan dengan sendirinya atau sebagai bagian dari bentuk yang lebih besar. Gunakan pemilih NGModel untuk mengaktifkannya.

Ia menerima model domain sebagai input opsional jika Anda memiliki ikatan satu arah dengan ngmodel dengan sintaks []; Mengubah nilai model domain di kelas komponen menetapkan nilai dalam tampilan.

Jika Anda memiliki pengikatan dua arah dengan sintaks [()] (juga dikenal sebagai ‘sintaks kotak pisang’), nilai dalam UI selalu menyinkronkan kembali ke model domain di kelas Anda.

Jika kita perlu memeriksa sifat -sifat dari bentuk bentuk yang terkait (seperti keadaan validitas), ekspor arahan ke variabel template lokal menggunakan ngmodel sebagai kunci (mis: #myvar = “ngmodel”).

Anda kemudian mengakses kontrol menggunakan properti kontrol Petunjuk, tetapi sebagian besar properti yang digunakan (seperti valid dan kotor) jatuh ke kontrol tetap untuk akses langsung.

Pertama, kita perlu mengimpor Formsmodule di dalam app.module.ts mengajukan.

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

imports: [
    ...
    FormsModule
  ],
 

Jika tidak, kami akan mendapatkan kesalahan seperti Compiler.js: 2175 Kesalahan Tak Terbang: Template Parse Kesalahan: Tidak ada arahan dengan “Exportas” yang diatur ke “ngModel”.

Sekarang, tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
    

Value: {{ name }}

Valid: {{ it.valid }}

`, styleUrls: ['./app.component.css'] }) export class AppComponent { name = ''; setValue() { this.name = 'Millie Bobby Brown'; } }

Simpan dan pergi ke browser.

Jika Anda menekan tombol setValue, Berikut ini akan menjadi output.

Angular

Saat menggunakan tag NGModel di dalam , Anda juga perlu menyediakan atribut nama untuk mendaftarkan kontrol dengan formulir induk dengan nama itu.

Dalam konteks bentuk induk, seringkali tidak perlu memasukkan ikatan satu arah atau dua arah, karena bentuk induknya menyinkronkan nilai untuk Anda.

Anda dapat mengakses propertinya dengan mengekspornya ke variabel template lokal menggunakan NGForm ( #f = ”ngform “). Gunakan variabel jika diperlukan pada pengiriman formulir.

Jika Anda perlu mengisi nilai awal ke dalam formulir Anda, menggunakan ikatan satu arah untuk NGModel cenderung cukup selama Anda menggunakan nilai formulir yang diekspor daripada nilai model domain saat dikirim.

Menggunakan ngmodel dalam bentuk dalam sudut

Contoh berikut menunjukkan kontrol menggunakan ngmodel dalam bentuk.

import { Component } from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
  selector: 'app-root',
  template: `
    

First name value: {{ first.value }}

First name valid: {{ first.valid }}

last name value: {{ last.value }}

last name valid: {{ last.valid }}

Form value: {{ it.value | json }}

Form valid: {{ it.valid }}

`, styleUrls: ['./app.component.css'] }) export class AppComponent { onSubmit(it: NgForm) { console.log(it.value); // { first: '', last: '' } console.log(it.valid); // false } }

Sekarang, buka browser dan lihat keajaiban Ngmodel sudut.

Angular ngmodel tidak berfungsi

Jika Anda seorang pemula dalam sudut dan bekerja dengan formulir, Anda sering menghadapi masalah seperti Angular Ngmodel yang tidak berfungsi, atau pengikatan data dua arah tidak berfungsi seperti yang diharapkan.

Masalah ini sering terjadi untuk pemula dalam sudut, dan untuk menyelesaikan masalah ini, mengimpor Formsmodule di Anda app.module.ts mengajukan. Semua fungsi dan sifat terkait formulir didefinisikan di bawah Formsmodule

Selain Formsmodule yang diperlukan di bagian Impor Deklarasi Modul di app.module.ts file, Anda perlu menggunakan tag formulir atau a NGFORM Arahan untuk memungkinkan fungsionalitas NGModel.

Jika Anda menggunakan Ngmodel Standalone, tanpa formulir di suatu tempat, Anda tidak perlu menentukan nama untuk input, seperti berikut ini.

 

Tetapi ketika Anda menggunakannya dalam bentuk, atribut nama menjadi wajib.

Saat menggunakan NGModel di dalam tag, Anda juga perlu memberikan atribut nama untuk mendaftarkan kontrol dengan formulir induk di bawah nama itu.

Metode Ngmodel Angular

#ngonchanges ()

Ini adalah metode siklus hidup yang dipanggil ketika input arahan hanya berubah untuk penggunaan internal.

Lihat sintaks berikut.

ngOnChanges(change: SimpleChanges)
 

Parameter disebut perubahan, objek pasangan kunci/nilai untuk himpunan input yang diubah.

#ngondestroy ()

Ini adalah metode siklus hidup sebelum instance arahan dihancurkan hanya untuk penggunaan internal.

Lihat sintaksnya.

ngOnDestroy(): void
 

Tidak ada parameter.

#viewtomodelupdate ()

Menetapkan nilai baru untuk model tampilan dan memancarkan acara NgModelChange.

Lihat sintaksnya.

viewToModelUpdate(newValue: any): void
 

Fungsi menerima satu parameter yang dipanggil nilai baru, Nilai baru yang dipancarkan oleh NgModelChange.

Itu untuk tutorial ini.

Posting yang disarankan

Angular ngfor

Angular ngstyle

Angular ngclass

NGX Angular

Toko Angular NGRX

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 *