Kaksisuuntainen sidonta ngModelilla
Synkronoikaa lomakesyötteet komponentin tilan kanssa.
Kaksisuuntainen sidonta ngModelilla on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä kaksisuuntainen sidonta on?
Kaksisuuntainen sidonta pitää arvon synkronoituna komponentin ja näkymän välillä: toisen päivittäminen päivittää myös toisen. Syntaksi on banana-in-a-box [()].
Banana in a box
Yhdistetty syntaksi [(...)] on lyhennys property bindingista ja event bindingista. Hakasulkeet muodostavat laatikon ja sulkeet banaanin.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">ngModelin esittely
ngModel on direktiivi, jolla lomakekontrolleihin, kuten input-kenttiin, select-elementteihin ja textarea-kenttiin, tehdään kaksisuuntainen sidonta.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>FormsModulen importointi
ngModel-direktiivin käyttämiseksi sinun on importoitava FormsModule standalone-komponenttiin tai NgModuleen.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Teksti-inputin sitominen
Kun käyttäjä kirjoittaa, sidottu property päivittyy heti, ja propertyn muuttaminen koodissa päivittää input-kentän.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Valintaruudun sitominen
ngModel toimii valintaruutujen kanssa ja sitoo niiden arvon totuusarvoon.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Select-elementin sitominen
Select-elementin kanssa ngModel sitoo arvon valittuun vaihtoehtoon.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel lomakkeissa
Lisää template-ohjatussa lomakkeessa name-attribuutti, jotta Angular rekisteröi kontrollin lomakkeeseen.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>Itsenäinen ngModel
Lomakkeen ulkopuolella ngModel toimii itsenäisesti, kunhan FormsModule on importoitu. name-attribuuttia ei tarvita.
<input [(ngModel)]="search">Milloin ngModelia kannattaa käyttää
ngModel sopii erinomaisesti yksinkertaisiin template-ohjattuihin lomakkeisiin. Monimutkaisissa validoinneissa ja dynaamisissa lomakkeissa reaktiivisia lomakkeita suositaan usein.
Muutoksiin reagoiminen
Jos sinun tarvitsee vain reagoida muutoksiin, sido (ngModelChange)-tapahtuma suoraan sen sijaan, että käyttäisit täydellistä kaksisuuntaista sidontaa.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Pikatesti
Testaa, miten hyvin ymmärrät ngModelin kaksisuuntaisen sidonnan.
Kertaus
Kaksisuuntaisessa sidonnassa käytetään banana-in-a-box-syntaksia [(ngModel)], joka yhdistää property- ja event bindingin. Importoi FormsModule, jotta voit käyttää sitä input-kentissä, valintaruuduissa ja select-elementeissä.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”Kaksisuuntainen sidonta ngModelilla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Kaksisuuntainen sidonta ngModelilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kaksisuuntainen sidonta ngModelilla”?
Synkronoikaa lomakesyötteet komponentin tilan kanssa. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Kaksisuuntainen sidonta ngModelilla”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Ominaisuus- ja tapahtumasidonnan kertaus
- Kaksisuuntainen sidonta ngModelilla
- model()-signaalisyötteet
- Mukautetut kaksisuuntaisesti sidottavat ominaisuudet