Apa perbedaan antara formControlName dan FormControl?

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.

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:)

[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
    });
}

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.

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

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)