html 中 Angular 的响应式表单控件的语法

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>

此代码有效。

我想了解既然formGroup和formControlName被包裹在[] （方括号）中，为什么formArrayName没有被包裹在 [] 中？

我在此页面中没有找到任何解释： https://angular.io/guide/reactive-forms

请解释该语法背后的原因。

Answer 1

Angular 中的方括号是一种“绑定语法”。 属性formGroup和formControlName包含在括号中，因为它们绑定到将被评估的表达式。 在您的示例中， formGroup正在接收您的objForm formGroup Object 的值。 fomrControlName将接收 *ngFor 语句中您的索引i当前指向的订单的值。

formArrayName没有传递需要评估的变量表达式，而是为它提供了“订单”的 static 值。 因此，矩形括号不是必需的，因为没有发生值绑定。

有关 Angular 绑定语法的更多信息，请参阅Angular 绑定语法。

还有关于同一主题的另一篇有用的帖子