Syntax of Angular's reactive form controls in html

Question

<form [formGroup]="objForm" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of getOrdersArray.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
      {{ordersData[i].name}}
  </label>
   
  <button>submit</button>
</form>

This code works.

I want to understand since formGroup and formControlName are wrapped in [] (rectangular brackets), why is formArrayName not wrapped in []?

I didn't find any explanation in this page: https://angular.io/guide/reactive-forms

Please explain the reasoning behind that syntax.

Because it's not *bound*; it's not specific to forms, read up on the template syntax at https://angular.io/guide/template-syntax or run through the tutorial https://angular.io/tutorial — jonrsharpe, Jan 31 '21 at 08:30
Does this answer your question? [What is the difference between parentheses, brackets and asterisks in Angular2?](https://stackoverflow.com/questions/35944749/what-is-the-difference-between-parentheses-brackets-and-asterisks-in-angular2) — jonrsharpe, Jan 31 '21 at 08:32

score 2 · Accepted Answer · answered Jan 31 '21 at 08:31

Rectangular brackets in Angular are a type of "Binding Syntax". The attributes formGroup and formControlName are wrapped in brackets because they are binding to an expression that will be evaluated. In your example, formGroup is receiving the value of your objForm formGroup Object. fomrControlName will receive the value of the order currently pointed to by your index i in the *ngFor statement.

formArrayName is not being passed a variable expression that needs evaluation, instead you are providing it with a static value of "orders". Thus, the rectangular brackets are not necessary as no value binding is taking place.

For more information on Angular binding syntax, see Angular Binding Syntax.

Also another helpful post on this same topic

Syntax of Angular's reactive form controls in html

1 Answers1