FormControlName ve FormControl arasındaki fark nedir?

ReactiveFormsModuleForm içeren bir bileşen oluşturmak için Angular2 kullanıyorum . İşte kodum:

foo.component.ts :

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html (ile [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 (ile 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>

Her iki yol da çalışır. Ama kullanmak [formControl]ve kullanmak arasındaki farkın ne olduğunu anlayamıyorum formControlName.

Önemli bir noktayı kaçırdığınıza inanıyorum: [formGroup]ikinci örnekteki yönerge. formunuzu birden çok nokta gezintisini kaydetmek için formControlNameile birlikte kullanılır [formGroup]. Örneğin:

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

Eşittir:

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

Şimdi iç içe FormGroupsgeçtiğinizi hayal edin :)

[formControl]FormControloluşturduğunuz örneğe bir başvuru atar FormControlDirective.

formControlName Denetimi ada göre aramak için formlar modülüne bir dize atar.

Kontroller için değişkenler .yaratırsanız, Harry'nin bahsettiği gibi de ihtiyacınız olmaz , ancak [formGroup]bunun yerine kullanmanızı öneririm, çünkü daha karmaşık formlarda bu karışık olabilir.

constructor(fb: FormBuilder) {
    this.fullName = new FormControl('', Validators.required);
    this.gender = new FormControl('');
    this.myForm = fb.group({
        'fullname': this.fullName,
        'gender': this.gender
    });
}

Kabul edilen cevapta verilen ikisinin 3. bir eşdeğerliği vardır, bu da budur (önerilmez):

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

Hala [formGroup] direktifini kullandığımıza dikkat edin.

Ancak, bu şablonun hatasız derlenmesi için, bileşeninizin denetimleri FormControls değil AbstractControls olarak bildirmesi gerekir:

myComponent.ts

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

Ancak, lütfen AbstractControls'ü bildirmenin tavsiye edilmediğini unutmayın , bu nedenle hatayı Cannot find control with unspecified name attributealırsanız muhtemelen stilleri karıştırmışsınızdır veya kontrollerinizi AbstractControls olarak ilan etmişsinizdir.

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

Bileşen

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

Şablon

<form [formGroup]="profileForm">

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

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

</form>

Tıpkı FormGroupbir denetim grubu içerdiği gibi, profileForm yönergesi FormGroupile form öğesine bağlanır FormGroupve model ile girdileri içeren form arasında bir iletişim katmanı oluşturur. formControlNameTarafından temin edilen giriş FormControlNameyönergesi tanımlanan şekilde kontrol için her bir giriş bağlananFormGroup

ile [formControl]çünkü Reaktif programlama avantajlarını kullanabilirsiniz FormControladında bir özelliği vardır valueChangesbir döndürür (şu anda bunu biliyorum, belki bundan daha vardır) Observablebunu abone olmak ve kullanabilir. (örneğin, giriş e-postasının kullanıcı değeri değiştirir değiştirmez tekrarlanmamasını kontrol etmek istediğiniz kayıt senaryolarında çok kullanışlıdır)