Qual è la differenza tra formControlName e FormControl?

Sto usando ReactiveFormsModuleAngular2 per creare un componente che contiene un modulo. Ecco il mio codice:

foo.component.ts :

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

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

Entrambi i modi funzionano. Ma non riesco a capire qual è la differenza tra l'utilizzo di [formControl]e formControlName.

Credo che tu abbia perso un punto importante: la [formGroup]direttiva nel secondo esempio. formControlNameviene utilizzato insieme a [formGroup]per salvare il modulo più navigazioni di punti. Per esempio:

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

È equivalente a:

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

Ora immagina annidato FormGroups:)

[formControl]assegna un riferimento FormControlall'istanza creata al file FormControlDirective.

formControlName assegna una stringa al modulo dei moduli per cercare il controllo in base al nome.

Se crei variabili per i controlli, anche tu non hai bisogno del .come menzionato da Harry, ma ti suggerisco anche di usarlo [formGroup]perché con forme più complicate questo può diventare disordinato.

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

C'è una terza equivalenza tra le due fornite nella risposta accettata, che è questa (non consigliata):

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

Si noti che stiamo ancora utilizzando la direttiva [formGroup].

Tuttavia, affinché questo modello si compili senza errori, il tuo componente deve dichiarare i controlli come AbstractControls e non FormControls:

myComponent.ts

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

Tuttavia, tieni presente che la dichiarazione di AbstractControls non è raccomandata , quindi se ottieni l'errore Cannot find control with unspecified name attribute, è probabile che tu abbia mescolato gli stili o abbia dichiarato i tuoi controlli come AbstractControls.

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

Componente

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

Modello

<form [formGroup]="profileForm">

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

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

</form>

Si noti che proprio come FormGroupcontiene un gruppo di controlli, il profileForm FormGroupè associato all'elemento del form con la FormGroup direttiva, creando uno strato di comunicazione tra il modello e il form contenente gli input. L' formControlNameinput fornito dalla FormControlNamedirettiva lega ogni singolo input al controllo del form definito nel fileFormGroup

con [formControl]puoi usare i vantaggi della programmazione reattiva perché FormControlha una proprietà denominata valueChanges(questa la conosco in questo momento, forse ce n'è di più) che restituisce una a Observablecui puoi iscriverti e usarla. (ad esempio, è molto utile negli scenari di registrazione in cui si desidera controllare che l'email di input non venga ripetuta non appena l'utente modifica il valore)