What is the difference between formControlName and FormControl?

I believe you missed an important point: [formGroup] directive in the second example. formControlName is used together with [formGroup] to save your form multiple dot navigations. For example:

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

Is equivalent to:

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

Now imagine nested FormGroups :)

[formControl] assigns a reference to the FormControl instance you created to the FormControlDirective.

formControlName assigns a string for the forms module to look up the control by name.

If you create variables for the controls, you also don't need the . as mentioned by Harry, but I'd also suggest to use [formGroup] instead because with more complicated forms this can become messy.

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

There is a 3rd equivalency to the two provided in the accepted answer, which is this (not recommended):

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

Notice that we are still using the [formGroup] directive.

However, for this template to compile without error, then your component needs to declare the controls as AbstractControls and not FormControls:

myComponent.ts

firstName: AbstractControllastName: AbstractControlemail: AbstractControltitle: AbstractControl

However, please note that declaring AbstractControls is not recommended, so if you get the error Cannot find control with unspecified name attribute then it is probable you have mixed the styles or have declared your controls as AbstractControls.