Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Angular – Model Odaklı Formlarda setValue Fonksiyonu Kullanımı

Merhaba,

Angular mimarisinde, form aracılığıyla kullanıcından edinilen bilgileri ‘Şablon Odaklı’ ve ‘Model Odaklı’ olmak üzere iki farklı yöntem kullanarak elde edebiliriz. Bu yöntemlere kısaca değinmek gerekirse eğer; ‘Şablon Odaklı’ formlarda kullanıcıdan alınan bilgilerin, ‘ngModel’ etiketiyle işaretlenmiş html elemanlarının taşıdıkları değerlerin bir şablon içerisinde bizlere ulaştırılmasıyla mümkünken; ‘Model Odaklı’ form yapılanmasında ise ilgili formdaki tüm alanları temsil eden modeller ile veri iletişimi söz konusudur. Konuya dair Angular 4 Form Uygulamaları başlıklı makalemizde daha detaylı bilgi edinebilirsiniz.

Bu içeriğimizde özellikle ‘Model Odaklı’ form yapılanmasında modele bağlanan bir “input” nesnesine “setValue” fonksiyonu ile nasıl değer atayabileceğimizi inceleyeceğiz.

Diyelim ki, elimizde aşağıdaki gibi bir componentimiz olsun.

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

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {
  frmContact: FormGroup;
  ngOnInit() {
    this.frmContact = new FormGroup({
      name: new FormControl(),
      surName: new FormControl(),
      age: new FormControl(),
      message: new FormControl()
    });
  }
  onSubmit(frm) {
    alert(`${frm.name} ${frm.surName} ${frm.age} ${frm.message}`);
  }
}

Kod bloğunu incelerseniz eğer ilgili component içerisinde bir model odaklı yaklaşım sergilenen form işlemi uygulanmıştır. Eğer ki, bu formun herhangi bir fieldına süreçte farklı bir değer set etmek istiyorsanız “setValue” fonksiyonunu kullanmanız gerekmektedir.

    this.frmContact.controls["name"].setValue("Gençay");
    this.frmContact.controls["surName"].setValue("Yıldız");
    this.frmContact.controls["age"].setValue("26");
    this.frmContact.controls["message"].setValue("laylaylom galiba sana göre sevmeler");

“setValue” fonksiyonunu yukarıdaki gibi “controls” özelliğinden sonra kullanmanız daha net ve doğrucu bir yaklaşım olacaktır.
Angular - Model Odaklı Formlarda setValue Fonksiyonu Kullanımı

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…

İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*