Apa perbedaan antara formControlName dan FormControl?

99

Saya menggunakan ReactiveFormsModuleAngular2 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.

smartmouse
sumber
1
Saya akan mengatakan bahwa alasan utama untuk menggunakan formControlName melalui formControl adalah ketika Anda tidak ingin mempertahankan contoh FormControl individu dalam komponen.
Paul Samsotha

Jawaban:

179

Saya yakin Anda melewatkan satu poin penting: [formGroup]petunjuk dalam contoh kedua. formControlNamedigunakan bersama dengan [formGroup]untuk menyimpan navigasi beberapa titik bentuk Anda. Sebagai contoh:

<div>
  <input type="text" [formControl]="myForm.controls.firstName"/>
  <input type="text" [formControl]="myForm.controls.lastName"/>
  <input type="text" [formControl]="myForm.controls.email"/>
  <input type="text" [formControl]="myForm.controls.title"/>
</div>

Setara dengan:

<div [formGroup]="myForm">
  <input type="text" formControlName="firstName"/>
  <input type="text" formControlName="lastName"/>
  <input type="text" formControlName="email"/>
  <input type="text" formControlName="title"/>
</div>

Sekarang bayangkan bersarang FormGroups:)

Harry Ninh
sumber
menggunakan [formControl] = "form.get ('Registration.Attributes.aboutme')" menyebabkan masalah .. tetapi berfungsi dengan baik dengan formControlName = "firstNRegistration.Attributes.aboutmeame"
Ricardo Saracino
[formControl]menyebabkan masalah saat form.validvalidasi dengan formGroup, setiap komentar
Pardeep Jain
bagaimana cara menangani jika elent masukan adalah komponen lain. bagaimana cara mengikat fomrcontrol dengan komponen
Ramakanth Reddy
20

[formControl]memberikan referensi ke FormControlinstance yang Anda buat ke FormControlDirective.

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.

constructor(fb: FormBuilder) {
    this.fullName = new FormControl('', Validators.required);
    this.gender = new FormControl('');
    this.myForm = fb.group({
        'fullname': this.fullName,
        'gender': this.gender
    });
}
Günter Zöchbauer
sumber
ketika saya menambahkan this.fullName = new FormControl ('', Validators.required); Saya mendapat kesalahan seperti Anda tidak dapat menetapkan karena ini properti read-only atau konstan, tetapi di sini saya diambil sebagai variabel. Jadi tolong bantu
user8478
1
Harap posting pesan kesalahan yang tepat . Mungkin lebih baik membuat pertanyaan baru yang berisi kode Anda yang memungkinkan untuk mereproduksi
Günter Zöchbauer
7

Ada persamaan ketiga dengan dua yang diberikan dalam jawaban yang diterima, yaitu ini (tidak disarankan):

<div [formGroup]="myForm">
  <input type="text" [formControl]="firstName"/>
  <input type="text" [formControl]="lastName"/>
  <input type="text" [formControl]="email"/>
  <input type="text" [formControl]="title"/>
</div>

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

firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl

Namun, perlu diketahui bahwa mendeklarasikan AbstractControls tidak disarankan , jadi jika Anda mendapatkan error Cannot find control with unspecified name attributetersebut, kemungkinan besar Anda telah mencampurkan gaya atau telah mendeklarasikan kontrol Anda sebagai AbstractControls.

rmcsharry
sumber
bagaimana cara menangani jika elent masukan adalah komponen lain. bagaimana cara mengikat fomrcontrol dengan komponen
Ramakanth Reddy
Anda tidak bisa - bahkan jika ADA jalan, Anda tidak boleh melakukannya. Elemen harus terikat pada kontrol yang ditentukan DI KOMPONEN ITU. Jika Anda ingin meneruskan data ke komponen lain maka gunakan layanan (atau jika itu adalah komponen induk maka event emitter). Google cara meneruskan data antar komponen
rmcsharry
dapatkah Anda melihat posting ini stackoverflow.com/questions/58100248/…
Ramakanth Reddy
2

Dari dokumen Angular ( https://angular.io/guide/reactive-forms ):

Komponen

@Component({
  ...
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

Template

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

Perhatikan bahwa seperti FormGroupberisi sekelompok kontrol, profileForm FormGroupterikat ke elemen formulir dengan FormGroup direktif, membuat lapisan komunikasi antara model dan formulir yang berisi input. The formControlNamemasukan yang diberikan oleh FormControlNamedirektif mengikat setiap masukan individu untuk kontrol bentuk didefinisikan dalamFormGroup

Chris Halcrow
sumber
1

dengan [formControl]Anda dapat menggunakan keuntungan pemrograman Reaktif karena FormControlmemiliki properti bernama valueChanges(saya tahu yang ini sekarang, mungkin ada lebih dari itu) yang mengembalikan Observableyang 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)

Seyed Ali Roshan
sumber
Iya. Tapi Anda masih menggunakan formControlName di template, bahkan saat menggunakan model di jawaban Anda. Cukup tetapkan formControlName = "someFormControlName" ke FormControl di file component.ts seperti someFormControlName: FormControl;
Charles Robertson