İki yönlü bağlama ile bileşenleriniz verileri paylaşabilir, olayları işleyebilir ve değerleri gerçek zamanlı olarak güncelleyebilir.
İki yönlü bağlama, kullanıcıların HTML dosyasından veri girmesine ve bunu TypeScript dosyasına göndermesine ve geri göndermesine olanak tanır. Bu, giriş doğrulama, manipülasyon ve daha fazlası için kullanışlıdır.
HTML’den TypeScript dosyasına veri ilettiğinizde, belirli iş mantığını tamamlamak için verileri kullanabilirsiniz. Örnek bir senaryo, bir giriş alanına girilen adın zaten var olup olmadığını kontrol etmek istemeniz olabilir.
İki Yönlü Bağlamayı Nasıl Kullanabilirsiniz?
Angular uygulamalarında iki yönlü bağlama genellikle .html dosyasında ngModel yönergesi kullanılarak ayarlanır. Bir giriş formundaki iki yönlü bağlama şöyle görünebilir:
<input
type=”email”
id=”email”
name=”email”
placeholder=”example@example.com”
[(ngModel)]=”emailAddress”
/>
.ts dosyasında , emailAddress değişkeni, formdaki emailAddress’e bağlıdır.
emailAddress: String = ”;
Angular Uygulamada Örnek Form Nasıl Kurulur
Temel bir uygulama oluşturarak, potansiyel bir kullanıcı adının zaten var olup olmadığını kontrol etmek için iki yönlü bağlamayı kullanabilirsiniz.
Yeni bir Angular uygulaması oluşturun.
Yeni bir bileşen oluşturmak için bileşen oluşturma komutunu çalıştırın . Formu burada saklayacağınız yer burasıdır.
ng generate component username-checker-form
app.component.html dosyanızdaki tüm kodu aşağıdaki etiketlerle değiştirin:
<app-username-checker-form> </app-username-checker-form>
Forma stil vermek için aşağıdaki CSS’yi yeni bileşeninizin username-checker-form.component.css konumunda bulunan .css dosyasına ekleyin :
.container {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
width: 50%;
background-color: peachpuff;
border-radius: 1rem;
padding: 1rem;
}
input {
border: 3px solid #1a659e;
border-radius: 5px;
height: 50px;
line-height: normal;
color: #1a659e;
display: block;
width: 100%;
box-sizing: border-box;
user-select: auto;
font-size: 16px;
padding: 0 6px;
padding-left: 12px;
}
input:focus {
border: 3px solid #004e89;
}
.btn {
display: block;
outline: 0;
cursor: pointer;
border: 2px solid #1a659e;
border-radius: 3px;
color: #fff;
background: #1a659e;
font-size: 20px;
font-weight: 600;
line-height: 28px;
padding: 12px 20px;
width: 100%;
margin-top: 1rem;
}
.btn:hover {
background: #004e89;
border: #004e89;
}
.success {
color: #14ae83;
}
.error {
color: #fd536d;
}
Genel uygulamanın yazı tipi ailesini, arka planını ve metin renklerini ayarlamak için aşağıdaki CSS’yi src/styles.css dosyasına ekleyin:
@import url(“https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap”);
body {
font-family: “Poppins”;
background-color: papayawhip;
color: #1a659e;
}
Kullanıcı adı denetleyici formunu eklemek için username-checker-form.component.html içindeki kodu değiştirin :
<div class=”container”>
<div class=”card”>
<h1> Username Checker </h1>
<form>
<input
type=”text”
id=”username”
name=”username”
placeholder=”Please enter a username”
/>
<button class=”btn”> Save </button>
</form>
</div>
</div>
Uygulamanızı terminalde ng serve komutunu kullanarak çalıştırın.
ng serve
Başvurunuzu http :// localhost : 4200 / adresinde görüntüleyin .
HTML ve TypeScript Dosyaları Arasında Veri Gönderme
Verileri .ts dosyanıza göndermek ve .html dosyasına geri göndermek için iki yönlü bağlamayı kullanın. Bu, formun giriş etiketlerinde ngModel kullanımıyla mümkündür.
FormsModule’u app.module.ts dosyasına alın ve imports dizisine ekleyin:
import { FormsModule } from ‘@angular/forms’;
@NgModule({
//…
imports: [
// other imports
FormsModule
],
//…
})
.ts dosyasında username-checker-form.component.ts adında bir kullanıcı adı sınıfı değişkeni bildirin :
username: string = ”;
username-checker-form.component.html içinde , giriş etiketindeki username değişkeniyle [ ( ngModel)] ekleyin. Bu, iki yönlü bağlamayı mümkün kılar ve formun kullanıcı adı girişine yazılan her şey .ts dosyasındaki kullanıcı adı değişkenine atanır.
<input
type=”text”
id=”username”
name=”username”
placeholder=”Please enter a username”
[(ngModel)]=”username”
/>
Verilerin .ts dosyasına gönderildiğini test etmek için username-checker-form.component.ts içinde bir save() yöntemi oluşturun . Formu gönderdiğinizde, uygulama bu işlevi arayacaktır.
save(): void {
console.log(this.username);
}
ngSubmit yönergesini username-checker-form.component.html içindeki <form> etiketlerine ekleyin ve save() yöntemini çağırın.
<form (ngSubmit)=”save()”>
Kaydet düğmesine tıklandığında, save() işlevi giriş alanına girilen değeri konsola yazdıracaktır. Konsolu, tarayıcının geliştirici araçlarını kullanarak çalışma zamanında görüntüleyebilirsiniz. Tarayıcı DevTools hakkında bilginiz yoksa veya konsolu görüntülüyorsanız, Chrome DevTools’un nasıl kullanılacağı hakkında daha fazla bilgi edinebilirsiniz .
Kullanıcı adını .html dosyasına geri gönderin . username-checker-form.component.html dosyasına <form> etiketlerinden sonra, küme parantezleri arasında kullanıcı adı değişkenini ekleyin. Kullanıcı adı değişkeninde saklanan değeri görüntülemek için küme parantezlerini kullanın.
<h2 *ngIf=”username”> Username entered: {{ username }} </h2>
Form, aynı anda girilen verileri göstermelidir.
username-checker-form.component.ts içinde , kullanıcı adının zaten var olup olmadığını kontrol etmek için bazı sınıf değişkenleri ekleyin. Alınan birkaç kullanıcı adıyla bir kullanıcı adları dizisi bildirin ve kullanıcıyı kontrol konusunda bilgilendiren bir mesaj dizisi ekleyin . Girilen kullanıcı adı kullanıcı adları dizisinde değilse, isValidUsername değişkeni doğrudur.
usernames: string[] = [ ‘bart’, ‘lisa’, ‘fry’, ‘leela’ ];
message: string = ”;
isValidUsername: boolean = false;
save() yöntemi , girilen kullanıcı adının zaten mevcut kullanıcı adları dizisinde olup olmadığını kontrol etmelidir. Sonuca bağlı olarak, mesaj buna göre ayarlanacaktır.
save(): void {
if (this.username != ”) {
this.isValidUsername = !this.usernames.includes(
this.username.toLowerCase()
);
if (this.isValidUsername) {
this.message = `Your new username is ‘${this.username}’`;
} else {
this.message = `The username ‘${this.username}’ has already been taken`;
}
}
}
Girilen kullanıcı adının var olup olmadığını göstererek username-checker-form.component.html dosyasını tamamlayın . Formdan sonra <h2> etiketlerinin altına bir hata mesajı ekleyin. isValidUsername değişkeni, görüntülenen mesajın rengini belirlemek için burada yardımcı olur .
<p *ngIf=”username” [ngClass]=”isValidUsername ? ‘success’ : ‘error'”>
{{ message }}
</p>
localhost:4200 adresindeki tarayıcınızda, kullanıcı adları dizisinde bulunan bir kullanıcı adını girmeyi deneyin:
Ardından, olmayan bir kullanıcı adı girmeyi deneyin.
Bir Uygulama Geliştirirken Veri Göndermek İçin İki Yönlü Bağlama Kullanma
İki yönlü bağlama, doğrulama, kontroller, hesaplamalar ve daha fazlası için kullanışlıdır. Bileşenlerin verileri gerçek zamanlı olarak iletmesine ve paylaşmasına olanak tanır.
Bir uygulamanın çeşitli bölümlerinde iki yönlü bağlama özelliklerini kullanabilirsiniz. Kullanıcıdan verileri aldıktan sonra, iş mantığını yürütebilir ve sonuçları kullanıcıya bildirebilirsiniz.
Bazen kullanıcının verilerini bir veritabanında depolamak istersiniz. Firebase NoSQL Veritabanı da dahil olmak üzere kullanabileceğiniz farklı veritabanı sağlayıcı türlerini keşfedebilirsiniz.