¿Cuál es la diferencia entre formControlName y FormControl?

Estoy usando ReactiveFormsModuleAngular2 para crear un componente que contiene un formulario. Aquí está mi código:

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>

Ambas formas funcionan. Pero no puedo entender cuál es la diferencia entre usar [formControl]y formControlName.

Creo que se perdió un punto importante: la [formGroup]directiva en el segundo ejemplo. formControlNamese utiliza junto con [formGroup]para guardar su formulario de navegación de múltiples puntos. Por ejemplo:

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

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

Ahora imagina anidado FormGroups:)

[formControl]asigna una referencia a la FormControlinstancia que creó al FormControlDirective.

formControlName asigna una cadena para que el módulo de formularios busque el control por nombre.

Si crea variables para los controles, tampoco necesita las .que menciona Harry, pero también sugiero usarlas [formGroup]en su lugar porque con formas más complicadas esto puede volverse complicado.

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

Hay una tercera equivalencia a las dos proporcionadas en la respuesta aceptada, que es esta (no recomendada):

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

Observe que todavía estamos usando la directiva [formGroup].

Sin embargo, para que esta plantilla se compile sin errores, entonces su componente debe declarar los controles como AbstractControls y no FormControls:

myComponent.ts

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

Sin embargo, tenga en cuenta que no se recomienda declarar AbstractControls , por lo que si obtiene el error Cannot find control with unspecified name attribute, es probable que haya mezclado los estilos o haya declarado sus controles como AbstractControls.

De los documentos de Angular ( https://angular.io/guide/reactive-forms ):

Componente

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

Modelo

<form [formGroup]="profileForm">

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

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

</form>

Tenga en cuenta que así como FormGroupcontiene un grupo de controles, profileForm FormGroupestá vinculado al elemento de formulario con la FormGroup directiva, creando una capa de comunicación entre el modelo y el formulario que contiene las entradas. La formControlNameentrada proporcionada por la FormControlNamedirectiva vincula cada entrada individual al control de formulario definido en elFormGroup

con [formControl]puede usar las ventajas de la programación reactiva porque FormControltiene una propiedad llamada valueChanges(conozco esta en este momento, tal vez haya más que eso) que devuelve una Observableque puede suscribirse y usar. (por ejemplo, es muy útil en escenarios de registro en los que desea verificar que el correo electrónico de entrada no se repita tan pronto como el usuario cambie el valor)