angular - Why we apply [formGroup] directive to forms under square-brackets while for form-fields we apply formControlName directive without square-brackets? -

i following angular 4 tutorial reactive form. while aplying formgroup , formcontrol directives finding inconsistency -

<form [formgroup]="formobj"> <div class="form-group"> <input formcontrolname="username"> 

it applying [formgroup] directive under square-brackets while formcontrolname directive without square-brackets.

what missing here?

if have directive mydir input mydir:

@directive(...) export class mydir {    @input() mydir; 

it can used or without brackets:

<span mydir="exp">...</span> <span [mydir]="exp">...</span> 

in first case value of mydir binding string exp:

export class mydir {    @input() mydir;    ngoninit() {       console.log(this.mydir); // "exp" 

in second case expression evaluated whatever exp on parent component contains:

@component(template: `<span mydir="exp"`) class parent {     exp = 'hello';  export class mydir {    @input() mydir;    ngoninit() {       console.log(this.mydir); // "hello" 

now, case form directives.

the formgroup expects instance of formgroup class. if don't use [] directive gets string formobj instead of object.

the formcontrolname expects string name of control in parent form group. why used without brackets.