为什么 FormGroup.Get() returns null 如果 FormControl 有 '.'在名字里？

Question

问题： 我使用 formbuilder 创建了一个 formGroup。 FormGroup 有一个名称中包含 . 的控件。现在，当我尝试使用 formGroup.get 方法获取 formControl 时，它返回 null.

代码

export class AppComponent implements OnInit  {
  name = 'Angular';
  obj = {};
  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {

  }

  ngOnInit() {
    this.obj["parent.child"] = new FormControl();
    this.obj["parent"] = new FormControl();

    this.formGroup = this.formBuilder.group(this.obj);

    // All controls
    console.log(this.formGroup.controls);

    // This is the problem its not geting the form control if I have '.' in the name of form control.
    console.log(this.formGroup.get("parent.child"));

    // If I am getting formControl without '.' then it is returning correctly.
    console.log(this.formGroup.get("parent"));
  }
}

这里我有一个 stackbiltz 的例子：https://stackblitz.com/edit/angular-grjh7e?file=src/app/app.component.ts

Answer 1

当使用 FormGroup.get() 时，它将使用“.”进行搜索。作为键分隔符，因此它将首先尝试找到控件“cz”并失败，因为它不存在（返回 null）。

当您提供 dot-separated 字符串时，此函数期望的是：

{
    "cz": {
        "datalite": {
            "makro": { ... }
        }
    }
}

解法：

this.formGroup.get(["parent.child"]);

工作示例：https://stackblitz.com/edit/angular-grjh7e?file=src/app/app.component.ts

为什么 FormGroup.Get() returns null 如果 FormControl 有 '.'在名字里？

Why FormGroup.Get() returns null if FormControl have '.' in the name?

angular

angular-reactive-forms

formgroups