在 FormGroup 实例上获取输入法 returns null

Question

我试图仅在 foo 输入无效时显示自定义错误消息，但似乎此行代码为空：myForm.get('foo').

这里是简化的 component.html:

<form [formGroup]="myForm">
  <div formGroupName="myData">
      Foo: <input type="text" formControlName="foo">
      <span *ngIf="!myForm.get('foo').valid">Not valid foo</span>
      Boo: <input type="text" formControlName="boo">
  </div>
  Zoo: <input type="text" formControlName="zoo">
</form>

和 component.ts:

export class AppComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      'myData': new FormGroup({
        'foo': new FormControl(null, Validators.required),
        'boo': new FormControl(null),
      }),
      'zoo': new FormControl(null)
    });
  }
}

为什么这行代码 myForm.get('foo') 被评估为空？我究竟做错了什么？如您所见，foo 是一个有效的 FormControl 对象。

Answer 1

您正在尝试从主窗体组获取嵌套窗体组控件。

尝试：

this.myForm.get(['myData', 'foo']);

或

this.myForm.get('myData.foo');

在 FormGroup 实例上获取输入法 returns null

Get input method on a FormGroup instance returns null

angular

angular-reactive-forms

formgroups