formGroup property of FormGroupDirective is not working if bind in normal way

Question

I know how Reactive Forms works in Angular. We first need to create a FormGroup Object in our TS File and then sync it with our HTML code with help of FormGroupDirective.

Below is the working code :

Sample Typescript Code and HTML Code:

export class CarComponent {
  // property that holds object
  myForm:FormGroup = new FormGroup({
    first: new FormControl('Nancy')
  });

  logOurForm(){
    console.log(this.myForm);
  }
}
<form [formGroup]="myForm" (ngSubmit)="logOurForm()">
    <input type = "text" [formControlName]="'first'">
    <button type = "submit">Submit Data</button>
</form>

Now if we click the button, the form will be logged in to console of browser as expected.

PROBLEM

The problem occurs, if we use normal syntax to bind to formGroup property of FormGroupDirective. If we use below code, we get error.

<form formGroup [formGroup]="myForm" (ngSubmit)="logOurForm()">
    <input type = "text" [formControlName]="'first'">
    <button type = "submit">Submit Data</button>
</form>

ERROR: Type string is not assignable to type FormGroup.

Que 1 : Why do we get this error?

Que 2 : Why does it work with <form [formGroup]="myForm"> but not with <form formGroup [formGroup]="myForm">?

Que 3: Why do we see this weird behavior with this directive only? If we try to do same with any other directive, it works perfectly.

Answer 1

Your error is with the '' in formControlName and the []. Try this.

<form formGroup [formGroup]="myForm" (ngSubmit)="logOurForm()">
    <input type="text" formControlName="first">
    <button type="submit">Submit Data</button>
</form>