Puede que se de el caso de que halles algún error en tu código o proyecto, recuerda probar siempre en un entorno de testing antes aplicar el código al trabajo final.
Solución:
Creo que te perdiste un punto importante: [formGroup] directiva en el segundo ejemplo. formControlName se usa junto con [formGroup] para guardar su formulario de navegación de múltiples puntos. Por ejemplo:
Es equivalente a:
Ahora imagina anidado FormGroups 🙂
[formControl] asigna una referencia a la FormControl instancia que creó para el FormControlDirective.
formControlName asigna un string para que el módulo de formularios busque el control por nombre.
Si crea variables para los controles, tampoco necesita el . como lo mencionó Harry, pero también sugeriría usar [formGroup] en cambio, 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 provistas en la respuesta aceptada, que es esta (no recomendada):
Tenga en cuenta que todavía estamos usando el [formGroup] directiva.
Sin embargo, para que esta plantilla se compile sin errores, su componente debe declarar los controles como AbstractControls y no FormControls:
miComponente.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 entonces es probable que tengas mixed los estilos o ha declarado sus controles como AbstractControls.
Tienes la posibilidad dar visibilidad a este escrito si te ayudó.