为什么我们将[formGroup]指令应用于方括号下的表单,而对于表单字段,我们应用不带方括号的formControlName指令？

Question

我正在关注一个关于反应形式的Angular 4教程.在使用FormGroup和FormControl指令时,我发现不一致 -

<form [formGroup]="formObj">
<div class="form-group">
<input formControlName="username">

它在方括号下应用[formGroup]指令而不使用方括号的formControlName指令.

我在这里错过了什么？

Answer 1

如果您有mydir输入的指令mydir:

@Directive(...)
export class MyDir {
   @Input() mydir;

它可以带或不带支架使用:

<span mydir="exp">...</span>
<span [mydir]="exp">...</span>

在第一种情况下,mydir绑定的值将是一个字符串exp:

export class MyDir {
   @Input() mydir;
   ngOnInit() {
      console.log(this.mydir); // "exp"

在第二种情况下,表达式将被评估exp为父组件包含的任何内容:

@Component(template: `<span mydir="exp"`)
class Parent {
    exp = 'hello';

export class MyDir {
   @Input() mydir;
   ngOnInit() {
      console.log(this.mydir); // "hello"

现在,以表格指令为例.

该formGroup预期的实例FormGroup类.如果不使用[]该指令,则获取字符串formObj而不是对象.

在formControlName预计一个字符串,它是控制父窗体组中查找的名称.这就是为什么它没有括号使用.