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

Question

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

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

它正在应用方括号下的 [formGroup] 指令，而没有方括号的 formControlName 指令。

我在这里错过了什么？

Answer 1

问得好，理解 Angular 很重要：指令（例如 formGroup 或 formControlName）在正常编写时可以设置为等于字符串，或者在包含在中时设置为等于来自组件 TypeScript 的值方括号。

所以 [formGroup]="formObj" 将 formGroup 指令设置为等于实际的动态对象，而 formControlName="username" 只是设置等于字符串 "name"

Answer 2

如果你有一个指令 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 class 的实例。如果你不使用 [] 指令得到一个字符串 formObj 而不是一个对象。

formControlName 需要一个字符串，它是要在父表单组中查找的控件的名称。这就是为什么它不带括号使用的原因。

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

Why we apply [formGroup] directive to forms under square-brackets while for form-fields we apply formControlName directive without square-brackets?

angular

angularjs-directive

angular-forms