Angular2:如何访问嵌套 formBuilder 表单上的 formControl 值

Angular2: how to access a formControl value on a nested formBuilder form

如何在不使用 [ngModel] 的情况下获取 this.resFormGroup.patientName.lastname.value 的值?

name="resForm"[formGroup]="resFormGroup"#resNgForm="ngForm" 在 HTML <form> 标签中的用途是什么?

我需要模板引用变量 #resNgForm 因为我有 [formGroup]="resFormGroup"?

这是我的组件:

// FormBuilder
this.resFormGroup = this.formBuilder.group({
  patientName: this.formBuilder.group({
    firstname: ['', Validators.required],
    lastname: ['', Validators.required]
  }),
  address: this.formBuilder.group({
    street: [],
    zip: [],
    city: []
  })
});

这是我的模板:

<form name="resForm" [formGroup]="resFormGroup" (ngSubmit)="onSubmit()" #resNgForm="ngForm">
  <fieldset formGroupName="patientName">
      <legend>Name</legend>
  <label>Firstname:</label>
  <input type="text" formControlName="firstname" [(ngModel)]="myFirstName">

  <label>Lastname:</label>
  <input type="text" ***formControlName="lastname"***>
  </fieldset>

  <fieldset formGroupName="address">
      <legend>Address</legend>
      <label>Street:</label>
      <input type="text" formControlName="street">

      <label>Zip:</label>
      <input type="text" formControlName="zip">

      <label>City:</label>
      <input type="text" formControlName="city">
  </fieldset>

  <button type="submit" class="btn btn-primary" [disabled]="!resNgForm.valid">Submit</button>

我的提交按钮:

 onSubmit() { 
   console.log("Submit button pressed [ngModel: " + this.myFirstName + "]    [Form: " + this.resFormGroup.controls["patientName"].dirty + "]"); 
 }

有了[ngModel],我就能得到名字;我还可以访问 formGrouppatientNamedirty 属性。

基于这个关于 dynamic form 的教程,他们使用了一种非常简单的方法来显示整个表单的值,而不需要 [ngModel]。

如何获取formBuilder表单值?答案是'this.myForm.value'.

示例代码

例如:

onSubmit(model: ResCrud) {  
    console.log("Nested Control: " + JSON.stringify(this.resFormGroup.value));
}

Web 控制台中的外观