Katkıda Bulun
Detaylı Rehberler
Formlar

Template-driven form oluşturma

Bu eğitim, şablon odaklı bir formun nasıl oluşturulacağını gösterir. Formdaki kontrol öğeleri, girdi doğrulamasına sahip veri özelliklerine bağlıdır. Girdi doğrulaması, veri bütünlüğünü korumaya ve kullanıcı deneyimini iyileştirmek için stil oluşturmaya yardımcı olur.

Şablon odaklı formlar, bileşendeki veri modelini şablonda yapılan değişiklikler doğrultusunda güncellemek ve tam tersini yapmak için çift yönlü veri bağlama kullanır.

Template vs Reactive forms

Angular, etkileşimli formlar için iki tasarım yaklaşımını destekler. Şablon odaklı formlar, Angular şablonunuzda forma özgü direktifler kullanmanıza olanak tanır. Reaktif formlar, form oluşturmak için model odaklı bir yaklaşım sağlar.

Şablon odaklı formlar küçük veya basit formlar için harika bir seçimdir, reaktif formlar ise daha ölçeklenebilir ve karmaşık formlar için uygundur. İki yaklaşımın karşılaştırması için Bir yaklaşım seçme bölümüne bakın

Angular şablonuyla hemen hemen her türlü formu oluşturabilirsiniz -- giriş formları, iletişim formları ve hemen hemen her iş formu. Kontrolleri yaratıcı bir şekilde yerleştirebilir ve nesne modelinizdeki verilere bağlayabilirsiniz. Doğrulama kuralları belirleyebilir ve doğrulama hatalarını görüntüleyebilir, belirli kontrollerden girdiyi koşullu olarak izin verebilir, yerleşik görsel geri bildirim tetikleyebilir ve çok daha fazlasını yapabilirsiniz.

Hedefler

Bu eğitim size aşağıdakileri nasıl yapacağınızı öğretir:

  • Bir bileşen ve şablonla Angular formu oluşturma
  • Girdi kontrol değerlerini okumak ve yazmak için çift yönlü veri bağlamaları oluşturmak üzere ngModel kullanma
  • Kontrollerin durumunu takip eden özel CSS sınıfları kullanarak görsel geri bildirim sağlama
  • Kullanıcılara doğrulama hatalarını gösterme ve form durumuna göre form kontrollerinden girdiyi koşullu olarak izin verme
  • Şablon referans değişkenleri kullanarak HTML öğeleri arasında bilgi paylaşma

Template-driven form oluşturun

Şablon odaklı formlar, FormsModule'da tanımlanan direktiflere dayanır.

Direktifler Ayrıntılar
NgModel Ekli form öğesindeki değer değişikliklerini veri modelindeki değişikliklerle uzlaştırır, girdi doğrulaması ve hata yönetimi ile kullanıcı girdisine yanıt vermenize olanak tanır.
NgForm Üst düzey bir FormGroup örneği oluşturur ve bunu toplu form değerini ve doğrulama durumunu takip etmek için bir <form> öğesine bağlar. FormsModule'ü içe aktardığınız anda, bu direktif varsayılan olarak tüm <form> etiketlerinde etkinleşir. Özel bir seçici eklemenize gerek yoktur.
NgModelGroup Bir FormGroup örneği oluşturur ve bir DOM öğesine bağlar.

Adımlara genel bakış

Bu eğitim boyunca, aşağıdaki adımları kullanarak örnek bir formu verilere bağlar ve kullanıcı girdisini yönetirsiniz.

  1. Temel formu oluşturun.
    • Bir örnek veri modeli tanımlayın
    • FormsModule gibi gerekli altyapıyı dahil edin
  2. ngModel direktifini ve çift yönlü veri bağlama sözdizimini kullanarak form kontrollerini veri özelliklerine bağlayın.
    • ngModel'in CSS sınıfları kullanarak kontrol durumlarını nasıl bildirdiğini inceleyin
    • Kontrolleri ngModel için erişilebilir kılmak üzere adlandırın
  3. ngModel kullanarak girdi geçerliliğini ve kontrol durumunu takip edin.
    • Duruma görsel geri bildirim sağlamak için özel CSS ekleyin
    • Doğrulama hata mesajlarını gösterin ve gizleyin
  4. Model verilerine ekleyerek yerel bir HTML düğme tıklama olayına yanıt verin.
  5. Formun ngSubmit çıkış özelliğini kullanarak form gönderimini yönetin.
    • Form geçerli olana kadar Submit düğmesini devre dışı bırakın
    • Gönderdikten sonra, tamamlanmış formu sayfadaki farklı içerikle değiştirin

Formu oluşturun

  1. Sağlanan örnek uygulama, formda yansıtılan veri modelini tanımlayan Actor sınıfını oluşturur.

    actor.ts

    export class Actor {
  constructor(
    public id: number,
    public name: string,
    public skill: string,
    public studio?: string,
  ) {}
}

  2. Form düzeni ve ayrıntıları ActorFormComponent sınıfında tanımlanır.

    actor-form.component.ts (v1)

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

import {Actor} from '../actor';
import {FormsModule} from '@angular/forms';
import {JsonPipe} from '@angular/common';

@Component({
  selector: 'app-actor-form',
  templateUrl: './actor-form.component.html',
  imports: [FormsModule, JsonPipe],
})
export class ActorFormComponent {
  skills = ['Method Acting', 'Singing', 'Dancing', 'Swordfighting'];

  model = new Actor(18, 'Tom Cruise', this.skills[3], 'CW Productions');

  submitted = false;

  onSubmit() {
    this.submitted = true;
  }

}

    Bileşenin "app-actor-form" selector değeri, bu formu <app-actor-form> etiketini kullanarak bir üst şablona yerleştirebileceğiniz anlamına gelir.

  3. Aşağıdaki kod, başlangıç formunun örnek bir aktör gösterebilmesi için yeni bir aktör örneği oluşturur.

    const myActress = new Actor(42, 'Marilyn Monroe', 'Singing');
    console.log('My actress is called ' + myActress.name); // "My actress is called Marilyn"

    Bu demo, model ve skills için sahte veriler kullanır. Gerçek bir uygulamada, gerçek verileri almak ve kaydetmek için bir veri hizmeti enjekte eder veya bu özellikleri girdiler ve çıktılar olarak sunarsınız.

  4. Bileşen, FormsModule modülünü içe aktararak Formlar özelliğini etkinleştirir.

    @Component({
  selector: 'app-actor-form',
  templateUrl: './actor-form.component.html',
  imports: [FormsModule, JsonPipe],
})
export class ActorFormComponent {

  5. Form, kök bileşenin şablonu tarafından tanımlanan uygulama düzeninde görüntülenir.

    app.component.html

    <app-actor-form />

    Başlangıç şablonu, iki form grubu ve bir gönder düğmesi olan bir form için düzeni tanımlar. Form grupları, Actor veri modelinin iki özelliğine karşılık gelir: name ve studio. Her grubun bir etiketi ve kullanıcı girdisi için bir kutusu vardır.

    • Name <input> kontrol öğesinde HTML5 required niteliği bulunur
    • Studio <input> kontrol öğesinde bulunmaz çünkü studio isteğe bağlıdır

    Submit düğmesinin üzerinde stil için bazı sınıflar vardır. Bu noktada, form düzeni tamamen düz HTML5'tir, bağlama veya direktif yoktur.

  6. Örnek form, Twitter Bootstrap'tan bazı stil sınıflarını kullanır: container, form-group, form-control ve btn. Bu stilleri kullanmak için uygulamanın stil sayfası kütüphaneyi içe aktarır.

    styles.css

    @import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

  7. Form, bir aktörün becerisinin ActorFormComponent içinde dahili olarak tutulan önceden tanımlanmış bir skills listesinden seçilmesini gerektirir. Angular @for döngüsü, <select> öğesini doldurmak için veri değerleri üzerinde yineleme yapar.

    actor-form.component.html (skills)

    <div class="form-group">
        <label for="skill">Skill</label>
        <select class="form-control" id="skill" required>
          @for (skill of skills; track $index) {
            <option [value]="skill">{{ skill }}</option>
          }
        </select>
      </div>

Uygulamayı şimdi çalıştırırsanız, seçim kontrolünde beceri listesini görürsünüz. Girdi öğeleri henüz veri değerlerine veya olaylara bağlı değildir, bu nedenle hala boşturlar ve davranışları yoktur.

Girdi kontrollerini veri özelliklerine bağlama

Bir sonraki adım, girdi kontrollerini, kullanıcı girdisine yanıt olarak veri modelini güncellemeleri ve ayrıca veri modelindeki programatik değişikliklere yanıt olarak görüntüyü güncellemeleri için çift yönlü veri bağlama ile ilgili Actor özelliklerine bağlamaktır.

FormsModule'da bildirilen ngModel direktifi, şablon odaklı formunuzdaki kontrolleri veri modelinizdeki özelliklere bağlamanıza olanak tanır. Çift yönlü veri bağlama sözdizimi [(ngModel)] ile direktifi dahil ettiğinizde, Angular kontrolün değerini ve kullanıcı etkileşimini takip edebilir ve görünümü modelle senkronize tutabilir.

  1. actor-form.component.html şablon dosyasını düzenleyin.
  2. Name etiketinin yanındaki <input> etiketini bulun.
  3. Çift yönlü veri bağlama sözdizimi [(ngModel)]="..." kullanarak ngModel direktifini ekleyin.

actor-form.component.html (excerpt)

<input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" />
  TODO: remove this: {{ model.name }}

HELPFUL: Bu örnekte, çift yönlü veri bağlamanın çalışmasını gözlemlerken ilgili özelliğin geçerli veri değerini göstermek için her girdi etiketinden sonra geçici bir tanılama interpolasyonu {{model.name}} bulunur. Yorum, çalıştığını gözlemlemeyi bitirdiğinizde tanılama satırlarını kaldırmanızı hatırlatır.

Genel form durumuna erişim

Bileşeninizde FormsModule'ü içe aktardığınızda, Angular otomatik olarak şablondaki <form> etiketine bir NgForm direktifi oluşturur ve bağlar (çünkü NgForm, <form> öğeleriyle eşleşen form seçicisine sahiptir).

NgForm'a ve genel form durumuna erişmek için bir şablon referans değişkeni bildirin.

  1. actor-form.component.html şablon dosyasını düzenleyin.

  2. <form> etiketini #actorForm şablon referans değişkeniyle güncelleyin ve değerini aşağıdaki gibi ayarlayın.

    actor-form.component.html (excerpt)

    <form #actorForm="ngForm">

    actorForm şablon değişkeni artık formu bir bütün olarak yöneten NgForm direktif örneğine bir referanstır.

  3. Uygulamayı çalıştırın.

  4. Name girdi kutusuna yazmaya başlayın.

    Karakterleri ekleyip sildikçe, veri modelinde görünüp kaybolduklarını görebilirsiniz.

Interpolasyonlu değerleri gösteren tanılama satırı, değerlerin gerçekten girdi kutusundan modele ve geri aktığını gösterir.

Kontrol öğelerini adlandırma

Bir öğede [(ngModel)] kullandığınızda, o öğe için bir name niteliği tanımlamanız gerekir. Angular, öğeyi üst <form> öğesine bağlı NgForm direktifine kaydetmek için atanan adı kullanır.

Örnekte, <input> öğesine bir name niteliği eklendi ve aktörün adı için mantıklı olan "name" olarak ayarlandı. Herhangi bir benzersiz değer işe yarar, ancak açıklayıcı bir ad kullanmak yararlıdır.

  1. Studio ve Skill için benzer [(ngModel)] bağlamaları ve name nitelikleri ekleyin.
  2. Artık interpolasyonlu değerleri gösteren tanılama mesajlarını kaldırabilirsiniz.
  3. Çift yönlü veri bağlamanın tüm aktör modeli için çalıştığını doğrulamak için, bileşenin şablonunun üstüne verileri bir dizeye serileştiren json pipe'ı ile yeni bir metin bağlaması ekleyin.

Bu düzeltmelerden sonra form şablonu aşağıdaki gibi görünmelidir:

actor-form.component.html (excerpt)

{{ model | json }}
      <div class="form-group">
        <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          required
          [(ngModel)]="model.name"
          name="name"
        />
      </div>

      <div class="form-group">
        <label for="studio">Studio</label>
        <input
          type="text"
          class="form-control"
          id="studio"
          [(ngModel)]="model.studio"
          name="studio"
        />
      </div>

      <div class="form-group">
        <label for="skill">Skill</label>
        <select class="form-control" id="skill" required [(ngModel)]="model.skill" name="skill">
          @for (skill of skills; track $index) {
            <option [value]="skill">{{ skill }}</option>
          }
        </select>
      </div>

Şunları fark edeceksiniz:

  • Her <input> öğesinin bir id özelliği vardır. Bu, <label> öğesinin for niteliği tarafından etiketi girdi kontrolüyle eşleştirmek için kullanılır. Bu bir standart HTML özelliğidir.

  • Her <input> öğesinin ayrıca Angular'ın kontrolü formla kaydetmek için kullandığı gerekli name özelliği vardır.

Etkileri gözlemledikten sonra, {{ model | json }} metin bağlamasını silebilirsiniz.

Form durumlarını takip etme

Angular, form gönderildikten sonra form öğelerine ng-submitted sınıfını uygular. Bu sınıf, gönderildikten sonra formun stilini değiştirmek için kullanılabilir.

Kontrol durumlarını takip etme

Bir kontrole NgModel direktifi eklemek, durumunu tanımlayan sınıf adlarını kontrole ekler. Bu sınıflar, kontrolün stilini durumuna göre değiştirmek için kullanılabilir.

Aşağıdaki tablo, Angular'ın kontrolün durumuna göre uyguladığı sınıf adlarını açıklar.

Durumlar Doğruysa sınıf Yanlışsa sınıf
Kontrol ziyaret edildi. ng-touched ng-untouched
Kontrolün değeri değişti. ng-dirty ng-pristine
Kontrolün değeri geçerli. ng-valid ng-invalid

Angular ayrıca gönderim sırasında form öğelerine ng-submitted sınıfını uygular, ancak form öğesi içindeki kontrollere uygulamaz.

Bu CSS sınıflarını, kontrolünüzün stili durumuna göre tanımlamak için kullanırsınız.

Kontrol durumlarını gözlemleme

Sınıfların çerçeve tarafından nasıl eklenip kaldırıldığını görmek için tarayıcının geliştirici araçlarını açın ve aktör adını temsil eden <input> öğesini inceleyin.

  1. Tarayıcınızın geliştirici araçlarını kullanarak, Name girdi kutusuna karşılık gelen <input> öğesini bulun. Öğenin "form-control"e ek olarak birden fazla CSS sınıfına sahip olduğunu görebilirsiniz.

  2. İlk açtığınızda, sınıflar geçerli bir değere sahip olduğunu, değerin başlatma veya sıfırlamadan beri değişmediğini ve kontrolün başlatma veya sıfırlamadan beri ziyaret edilmediğini gösterir.

    <input class="form-control ng-untouched ng-pristine ng-valid" />;

  3. Name <input> kutusunda aşağıdaki eylemleri yapın ve hangi sınıfların göründüğünü gözlemleyin.

    • Bakın ama dokunmayın. Sınıflar, dokunulmamış, saf ve geçerli olduğunu gösterir.

    • Ad kutusunun içine tıklayın, ardından dışına tıklayın. Kontrol artık ziyaret edilmiştir ve öğe ng-untouched sınıfı yerine ng-touched sınıfına sahiptir.

    • Adın sonuna eğik çizgiler ekleyin. Artık dokunulmuş ve değiştirilmiştir.

    • Adı silin. Bu, değeri geçersiz yapar, bu nedenle ng-invalid sınıfı ng-valid sınıfının yerini alır.

Durumlar için görsel geri bildirim oluşturma

ng-valid/ng-invalid çifti özellikle ilginçtir, çünkü değerler geçersiz olduğunda güçlü bir görsel sinyal göndermek istersiniz. Ayrıca zorunlu alanları işaretlemek istersiniz.

Zorunlu alanları ve geçersiz verileri, girdi kutusunun solundaki renkli bir çubukla aynı anda işaretleyebilirsiniz.

Görünümü bu şekilde değiştirmek için aşağıdaki adımları izleyin.

  1. ng-* CSS sınıfları için tanımlar ekleyin.

  2. Bu sınıf tanımlarını yeni bir forms.css dosyasına ekleyin.

  3. Yeni dosyayı index.html'nin yanına projeye ekleyin:

    forms.css

    .ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

  4. index.html dosyasında, <head> etiketini yeni stil sayfasını içerecek şekilde güncelleyin.

    index.html (styles)

    <link rel="stylesheet" href="assets/forms.css" />

Doğrulama hata mesajlarını gösterme ve gizleme

Name girdi kutusu zorunludur ve temizlemek çubuğu kırmızıya çevirir. Bu, bir şeyin yanlış olduğunu gösterir, ancak kullanıcı neyin yanlış olduğunu veya bu konuda ne yapacağını bilmez. Kontrolün durumunu kontrol ederek ve yanıt vererek yararlı bir mesaj sağlayabilirsiniz.

Skill seçim kutusu da zorunludur, ancak seçim kutusu zaten seçimi geçerli değerlerle sınırladığı için bu tür bir hata yönetimine ihtiyaç duymaz.

Uygun olduğunda bir hata mesajı tanımlamak ve göstermek için aşağıdaki adımları izleyin.

  1. Girdiye yerel bir referans ekleyin

    input etiketini, şablon içinden girdi kutusunun Angular kontrolüne erişmek için kullanabileceğiniz bir şablon referans değişkeni ile genişletin. Örnekte değişken #name="ngModel"'dır.

    Şablon referans değişkeni (#name), "ngModel" olarak ayarlanmıştır çünkü bu, NgModel.exportAs özelliğinin değeridir. Bu özellik, Angular'a bir referans değişkenini bir direktife nasıl bağlayacağını söyler.

  2. Hata mesajını ekleyin

    Uygun bir hata mesajı içeren bir <div> ekleyin.

  3. Hata mesajını koşullu yapın

    name kontrolünün özelliklerini mesaj <div> öğesinin hidden özelliğine bağlayarak hata mesajını gösterin veya gizleyin.

    4. actor-form.component.html (hidden-error-msg)

    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">

  4. İsim alanına koşullu bir hata mesajı ekleyin

    Aşağıdaki örnekte olduğu gibi, name girdi kutusuna koşullu bir hata mesajı ekleyin.

    actor-form.component.html (excerpt)

    <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          required
          [(ngModel)]="model.name"
          name="name"
          #name="ngModel"
        />
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
          Name is required
        </div>

Bu örnekte, kontrol ya geçerli ya da saf olduğunda mesajı gizlersiniz. Saf, kullanıcının bu formda görüntülenen değeri değiştirmediği anlamına gelir. pristine durumunu göz ardı ederseniz, mesajı yalnızca değer geçerli olduğunda gizlersiniz. Bu bileşene yeni, boş bir aktörle veya geçersiz bir aktörle gelirseniz, herhangi bir şey yapmadan önce hata mesajını hemen görürsünüz.

Mesajın yalnızca kullanıcı geçersiz bir değişiklik yaptığında görüntülenmesini isteyebilirsiniz. Kontrol pristine durumundayken mesajı gizlemek bu hedefe ulaşır. Bir sonraki adımda forma yeni bir aktör eklediğinizde bu seçimin önemini göreceksiniz.

Yeni bir aktör ekleme

Bu alıştırma, model verilerine ekleme yaparak yerel bir HTML düğme tıklama olayına nasıl yanıt vereceğinizi gösterir. Form kullanıcılarının yeni bir aktör eklemesine izin vermek için, bir tıklama olayına yanıt veren bir New Actor düğmesi ekleyeceksiniz.

  1. Şablonda, formun altına bir "New Actor" <button> öğesi yerleştirin.

  2. Bileşen dosyasında, aktör veri modeline aktör oluşturma yöntemini ekleyin.

    actor-form.component.ts (New Actor method)

    newActor() {
    this.model = new Actor(42, '', '');
  }

  3. Düğmenin tıklama olayını bir aktör oluşturma yöntemi olan newActor()'a bağlayın.

    actor-form.component.html (New Actor button)

    <button type="button" class="btn btn-default" (click)="newActor()">New Actor</button>

  4. Uygulamayı tekrar çalıştırın ve New Actor düğmesine tıklayın.

    Form temizlenir ve girdi kutusunun solundaki zorunlu çubuklar kırmızıdır, geçersiz name ve skill özelliklerini gösterir. Hata mesajlarının gizlendiğine dikkat edin. Bunun nedeni formun saf olmasıdır; henüz hiçbir şey değiştirmediniz.

  5. Bir ad girin ve tekrar New Actor'a tıklayın.

    Şimdi uygulama bir Name is required hata mesajı görüntüler, çünkü girdi kutusu artık saf değildir. Form, New Actor'a tıklamadan önce bir ad girdiğinizi hatırlar.

  6. Form kontrollerinin saf durumunu geri yüklemek için, newActor() yöntemini çağırdıktan sonra formun reset() yöntemini çağırarak tüm bayrakları zorunlu olarak temizleyin.

    actor-form.component.html (Reset the form)

    <button type="button" class="btn btn-default" (click)="newActor(); actorForm.reset()">
        New Actor
      </button>

    Artık New Actor'a tıklamak hem formu hem de kontrol bayraklarını sıfırlar.

ngSubmit ile formu gönderme

Kullanıcı formu doldurduktan sonra gönderebilmelidir. Formun altındaki Submit düğmesi kendi başına hiçbir şey yapmaz, ancak türü (type="submit") nedeniyle bir form gönderme olayı tetikler.

Bu olaya yanıt vermek için aşağıdaki adımları izleyin.

  1. ngOnSubmit'i dinleyin

    Formun ngSubmit olay özelliğini aktör form bileşeninin onSubmit() yöntemine bağlayın.

    actor-form.component.html (ngSubmit)

    <form (ngSubmit)="onSubmit()" #actorForm="ngForm">

  2. disabled özelliğini bağlayın

    Submit düğmesini içeren forma erişmek için #actorForm şablon referans değişkenini kullanın ve bir olay bağlaması oluşturun.

    Formun genel geçerliliğini gösteren özelliğini Submit düğmesinin disabled özelliğine bağlayacaksınız.

    actor-form.component.html (submit-button)

    <button type="submit" class="btn btn-success" [disabled]="!actorForm.form.valid">
        Submit
      </button>

  3. Uygulamayı çalıştırın

    Düğmenin etkin olduğuna dikkat edin -- henüz yararlı bir şey yapmamasına rağmen.

  4. İsim değerini silin

    Bu, "required" kuralını ihlal eder, bu nedenle hata mesajını görüntüler -- ve dikkat edin, Submit düğmesini de devre dışı bırakır.

    Düğmenin etkin durumunu formun geçerliliğine açıkça bağlamanız gerekmedi. FormsModule, geliştirilmiş form öğesinde bir şablon referans değişkeni tanımladığınızda ve ardından düğme kontrolünde bu değişkene atıfta bulunduğunuzda bunu otomatik olarak yaptı.

Form gönderimine yanıt verme

Form gönderime bir yanıt göstermek için, veri giriş alanını gizleyebilir ve yerine başka bir şey görüntüleyebilirsiniz.

  1. Formu sarmalayın

    Tüm formu bir <div> içine sarın ve hidden özelliğini ActorFormComponent.submitted özelliğine bağlayın.

    actor-form.component.html (excerpt)

    <div [hidden]="submitted">
    <h1>Actor Form</h1>
    <form (ngSubmit)="onSubmit()" #actorForm="ngForm">

    <!-- ... all of the form ... -->
  </form>
</div>

    ActorFormComponent'ten bu kod parçacığının gösterdiği gibi, submitted özelliği formu göndermeden önce false olduğundan, ana form başlangıçtan itibaren görünürdür:

    actor-form.component.ts (submitted)

    submitted = false;

  onSubmit() {
    this.submitted = true;
  }

    Submit düğmesine tıkladığınızda, submitted bayrağı true olur ve form kaybolur.

  2. Gönderildi durumunu ekleyin

    Form gönderilmiş durumdayken başka bir şey göstermek için, yeni <div> sarmalayıcısının altına aşağıdaki HTML'yi ekleyin.

    actor-form.component.html (excerpt)

    <div [hidden]="!submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
      <div class="col-xs-3">Name</div>
      <div class="col-xs-9">{{ model.name }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Studio</div>
      <div class="col-xs-9">{{ model.studio }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Skill</div>
      <div class="col-xs-9">{{ model.skill }}</div>
    </div>
    <br />
    <button type="button" class="btn btn-primary" (click)="submitted = false">Edit</button>
  </div>

    Bu <div>, interpolasyon bağlamalarıyla salt okunur bir aktör gösterir ve yalnızca bileşen gönderilmiş durumdayken görünür.

    Alternatif görüntü, tıklama olayı submitted bayrağını temizleyen bir ifadeye bağlı olan bir Edit düğmesi içerir.

  3. Düzenle düğmesini test edin

    Görüntüyü düzenlenebilir forma geri döndürmek için Edit düğmesine tıklayın.

Özet

Bu sayfada tartışılan Angular formu, veri değiştirme, doğrulama ve daha fazlası için destek sağlamak üzere aşağıdaki çerçeve özelliklerinden yararlanır.

  • Bir Angular HTML form şablonu
  • @Component dekoratörüne sahip bir form bileşeni sınıfı
  • NgForm.ngSubmit olay özelliğine bağlanarak form gönderimini yönetme
  • #actorForm ve #name gibi şablon referans değişkenleri
  • Çift yönlü veri bağlama için [(ngModel)] sözdizimi
  • Doğrulama ve form öğesi değişiklik takibi için name niteliklerinin kullanımı
  • Referans değişkeninin girdi kontrollerindeki valid özelliği, bir kontrolün geçerli olup olmadığını veya hata mesajlarını gösterip göstermeyeceğini belirtir
  • NgForm geçerliliğine bağlanarak Submit düğmesinin etkin durumunu kontrol etme
  • Geçerli olmayan kontroller hakkında kullanıcılara görsel geri bildirim sağlayan özel CSS sınıfları

Uygulamanın son sürümü için kod: