Question

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

[formControlName]="dyncontrol.key"

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

formControlName="name"

Answer 1

这是来自Template Syntax documentation：

记住括号

括号告诉Angular评估模板表达式。如果我们忘记括号，Angular会将字符串视为常量并使用该字符串初始化目标属性。它没有评估字符串！

不要犯下以下错误：

<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？

3 个答案:

记住括号