带或不带括号的 formControlName？

Question

在括号内使用 formControlName 和不在括号内有什么区别？在动态表单教程中 formcontrolname 用于括号内

[formControlName]="dyncontrol.key"

但在其他教程中我看到没有它们

formControlName="name"

Answer 1

来自 Template Syntax documentation:

Remember the brackets

The brackets tell Angular to evaluate the template expression. If we forget the brackets, Angular treats the string as a constant and initializes the target property with that string. It does not evaluate the string!

Don't make the following mistake:

<hero-detail hero="currentHero"></hero-detail>

Answer 2

使用括号表示值为表达式，不带括号表示值为字符串：

let a = {n: "name"};

则[formControlName]="a.n"与formControlName="name"相同。

所有其他 angular2 属性都具有相同的规则。

Answer 3

带括号的是属性绑定：

[viewTargetProperty]='componentMember'

没有括号是组件或指令的输入成员:

<p appHighlight highlightColor="yellow">Highlighted in yellow</p>

highlightColor 是指令 appHighLight.

的输入

因此，对于 formControlName 它是 FormControlName 指令的输入。它可能是这样的：

<input FormControlName formControlName="nameOfFormControlObject">

请参阅 FormControlName 的 api 文档：https://angular.io/api/forms/FormControlName。您会注意到它有一个名为 "formControlName" 的输入，这就是我们在这里使用的。

但不知何故，FormControlName 指令在实现中没有看到。不知何故，它必须在内部链接到父表单上的 FormGroup 指令：

  <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div *ngIf="first.invalid"> Name is too short. </div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
   </form>

我请求一些专家澄清这种技术的内部结构。

带或不带括号的 formControlName？

formControlName with or without brackets?

angular2-forms

angular

Remember the brackets