Angular2：ネストされたformBuilderフォームのformControl値にアクセスする方法

Question

this.resFormGroup.patientName.lastname.valueを使用せずに[ngModel]の値を取得するにはどうすればよいですか？

HTML name="resForm"タグの[formGroup]="resFormGroup"、#resNgForm="ngForm"、および<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]を使用すると、名を取得できます。 dirtyのformGroupのpatientName属性にアクセスすることもできます。

Answer 1

動的フォーム に関するこのチュートリアルに基づいて、彼らは[ngModel]なしでフォーム全体の値を表示するために非常に簡単な方法を使用しました。

FormBuilderフォーム値を取得する方法は？答えは「this.myForm.value」です。

サンプルコード

例えば：

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

Webコンソールでの外観