[formControl]="seachControl" is known as model binding, it connects to the main form element which in this case is a search field.
When you only have one form element, like search, you simply bind it to a variable created within your class, making sure to consider the variable's type.
Regarding the code snippet:
<input type="text" formControlName="street">
Since the street variable was created within the main formControl element, direct access to it is not available. The directive here informs the parent element that this particular tag should be bound to the street variable inside the main formControl.
As for
<input type="text" [formControlName]="street">
I am unsure but it seems that the formControlName does not handle the actual binding, rather it indicates what this tag should be bound to. The syntax implies that it will look for the street variable within your class and establish a connection.
One explanation mentions:
This is where the formControlName directive comes into play. It's similar to utilizing an ngModel and name attribute combination in template-driven forms. Each form control receives a formControlName directive to register controls on the outer form
Therefore, focus on binding the outer model since it exists/instantiated within your class, allowing formControlName and formGroupName to manage the inner elements.