Saya menggunakan ReactiveFormsModule
Angular2 untuk membuat komponen yang berisi formulir. Ini kode saya:
foo.component.ts :
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'fullname': ['', Validators.required],
'gender': []
});
}
foo.component.html (dengan [formControl]
):
<div class="fields">
<div class="field">
<label>Fullname*</label>
<input type="text" [formControl]="myForm.controls.fullname"/>
</div>
</div>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
<label>Female</label>
</div>
</div>
</div>
foo.component.html (dengan formControlName
):
<div class="fields">
<div class="field">
<label>Fullname*</label>
<input type="text" formControlName="fullname"/>
</div>
</div>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender">
<label>Female</label>
</div>
</div>
</div>
Kedua cara bekerja. Tetapi saya tidak tahu apa perbedaan antara menggunakan [formControl]
dan formControlName
.
Jawaban:
Saya yakin Anda melewatkan satu poin penting:
[formGroup]
petunjuk dalam contoh kedua.formControlName
digunakan bersama dengan[formGroup]
untuk menyimpan navigasi beberapa titik bentuk Anda. Sebagai contoh:Setara dengan:
Sekarang bayangkan bersarang
FormGroups
:)sumber
[formControl]
menyebabkan masalah saatform.valid
validasi dengan formGroup, setiap komentar[formControl]
memberikan referensi keFormControl
instance yang Anda buat keFormControlDirective
.formControlName
menetapkan string untuk modul formulir untuk mencari kontrol berdasarkan nama.Jika Anda membuat variabel untuk kontrol, Anda juga tidak memerlukan
.
seperti yang disebutkan oleh Harry, tetapi saya juga menyarankan untuk menggunakan[formGroup]
sebagai gantinya karena dengan bentuk yang lebih rumit ini bisa menjadi berantakan.sumber
Ada persamaan ketiga dengan dua yang diberikan dalam jawaban yang diterima, yaitu ini (tidak disarankan):
Perhatikan bahwa kita masih menggunakan direktif [formGroup].
Namun, agar template ini dapat dikompilasi tanpa kesalahan, maka komponen Anda perlu mendeklarasikan kontrol sebagai AbstractControls dan bukan FormControls:
myComponent.ts
Namun, perlu diketahui bahwa mendeklarasikan AbstractControls tidak disarankan , jadi jika Anda mendapatkan error
Cannot find control with unspecified name attribute
tersebut, kemungkinan besar Anda telah mencampurkan gaya atau telah mendeklarasikan kontrol Anda sebagai AbstractControls.sumber
Dari dokumen Angular ( https://angular.io/guide/reactive-forms ):
Komponen
Template
sumber
dengan
[formControl]
Anda dapat menggunakan keuntungan pemrograman Reaktif karenaFormControl
memiliki properti bernamavalueChanges
(saya tahu yang ini sekarang, mungkin ada lebih dari itu) yang mengembalikanObservable
yang Anda dapat berlangganan dan menggunakannya. (misalnya, ini sangat berguna dalam skenario register yang ingin Anda periksa email masukannya agar tidak diulang begitu pengguna mengubah nilainya)sumber