angular6 用子对象构建表单

Question

I'm building an angular form that would send data to the server via an API. The API is expecting the object in this format

  {

          "firstname": "string",
          "lastname": "string",
          "custom": {
              "blood_type": 'string',
          }

      }

With the current form, I'm building I get this in the console

{

        "firstname": "string",
        "lastname": "string",
        "blood_type": 'string',

    }

How do I build my form so it matches the way the API is expecting it? Below is the form builder script

 this.testForm = this.formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required],
      blood_type: ['', Validators.required]
    });

HTML

<form [formGroup]="testForm">
<input type="text" class="form-control" formControlName="firstname">
<input type="text" class="form-control" formControlName="lastname">
<input type="text" class="form-control" formControlName="blood_group">
</form>

Answer 1

You can create a custom formGroup like this:

export class AppComponent  {
  custom = this.fb.group({    // `custom` formGroup
    blood_type: ['', Validators.required]
  });
  f = this.fb.group({         // Main formGroup
    firstname: ['', Validators.required],
    lastname: ['', Validators.required],
    custom: this.custom       // Register the `custom` formGroup here
  });

  constructor(private fb: FormBuilder) {}

  validate() {
    console.log(this.f.value);
  }
}

And your template could look like this:

<form [formGroup]="f">
  <input formControlName="firstname">
  <input formControlName="lastname">
</form>
<form [formGroup]="custom">
  <input formControlName="blood_type">
</form>

<button type="submit" (click)="validate()">OK</button>
<pre>{{f.value | json}}</pre>

Sample stackblitz