Angular 2 formControlName

Question

更新

向下滚动以查看原始问题。

基于David Walschots＆＃39;在下面回答，我意识到我错过了从[formControl]到formControlName的转换。

formControl期待一个FormControl属性，该属性位于组件中（如此处所示）：

当formControlName期待一个字符串时，按照指南将其设置为formControlName="name"，而不是[formControlName]="'name'"，这将是设置它的首选方式。

原始问题

我正在浏览Angular 2 Reactive Forms Guide

我不明白的一件事是他们最初在[]内显示formControlName

然后他们省略了[]， 看似错误，但在示例中包含[]失败。

查看源代码，我看到formControlName是name的别名，

所以我尝试使用[name]="name"，这有效。所以它似乎是一个 别名输入属性不能使用[]内的别名。 这是应该的方式吗？

查看Directives documentation内@Input（）的文档，似乎别名在[]内部可以正常工作。

任何人都可以解释这里发生了什么吗？

Answer 1

第一个示例不是使用formControlName而是formControl，这是一个不同的指令。如上所述here：

  

FormControlDirective旨在用作独立控件。与FormControlName不同，它不要求您的FormControl实例是任何父FormGroup的一部分。

该示例使用[formControl]，因为给定的＆＃34;名称＆＃34;实际上是对FormControl的引用，export class HeroDetailComponent1 { name = new FormControl(); } 是组件属性的一部分：

[]

如果希望Angular解释引号之间的内容，可以使用formControlName。否则引号之间的值将被解释为字符串。

[]属性需要一个字符串，这就是为什么不需要进一步解释而省略[attribute1]="true" attribute2="true" 的原因。

另一个例子

document.addEventListener('click', function(e) {
  if (e.target.className.indexOf('change') > -1) {
    var headerEl = document.querySelector(".header");
    var subHeaderEl = document.querySelector(".sub-header");

    // This will toggle the color change on or off after each click
    if (headerEl.className.indexOf('color') > -1) {
      headerEl.className = headerEl.className.replace(" color", "");
      subHeaderEl.className = subHeaderEl.className.replace(" color", "");
    } else {
      headerEl.className += " color";
      subHeaderEl.className += " color";
    }
  }
})

这里，attribute1将传递布尔值true，而attribute2将传递字符串值＆＃34; true＆＃34;。

Answer 2

如果省略[]，则输入值将被视为字符串：input="name"，在本例中为this.input === 'name'。

要使用[]获得相同的结果，您必须[input]="'name'"，或者如果您有公开字段public name:string = 'name'，那么您还可以[input]="name"。

所以它应该是[formControlName]="'name'"。