首页 文章

为什么我们将[1]指令应用于 square-brackets 下的表单，而对于 form-fields 我们应用不带 square-brackets 的 formControlName 指令？

提问于
浏览 次
3

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

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

它在 square-brackets 下应用[4]指令而不是 square-brackets 的 formControlName 指令。

我在这里错过了什么？

angular angularjs-directive angular-forms

2 回答

  • 7

    如果你有一个带有输入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需要一个字符串，该字符串是要在父表单组中查找的控件的名称。这就是为什么它没有括号使用。

    回复于
  • 2

    好的问题，对于 Angular 来说很重要：指令(e.g. formGroup 或 formControlName)可以在正常写入时设置为等于字符串，或者在方括号中括起时设置为等于组件 TypeScript 中的值。

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

    回复于

相关问题