如何在formbuilder中使用get获取嵌套表单的值？

Question

I use form builder to build a form and using get to obtain the value of birthday, ageNum and ageUnit, but it seems that this method is not working cuz it may got null in group age. does anyone know how to fix this? thanks

ts

this.form = this.fb.group({
      birthday: ['', this.validateDate],
      age: this.fb.group(
        [
          {
            ageNum: [],
            ageUnit: [AgeUnit.Year]
          },
          {validator: this.validateAge('ageNum', 'ageUnit')}
        ])
    })

    const birthday = this.form.get('birthday');
    const ageNum = this.form.get('age').get('ageNum');   //here got wrong
    const ageUnit = this.form.get('age').get('ageUnit'); //and here

html

<div [formGroup]="form" class="age-input">
  <div>
    <mat-form-field>
      <input type="text" matInput [matDatepicker]="birthPicker" formControlName="birthday" placeholder="birthDate">
      <mat-datepicker-toggle [for]="birthPicker" matSuffix></mat-datepicker-toggle>
      <mat-error>date error</mat-error>
    </mat-form-field>
    <mat-datepicker touchUi="true" #birthPicker></mat-datepicker>
  </div>

  <ng-container formGroupName="age">
    <div class="age-num">
      <mat-form-field>
        <input type="number" placeholder="age" matInput formControlName="ageNum">
      </mat-form-field>
    </div>

    <div>
      <mat-button-toggle-group formControlName="ageUnit" [(ngModel)]="selectedUnit">
        <mat-button-toggle *ngFor="let unit of ageUnits" [value]="unit.value">
          {{unit.label}}
        </mat-button-toggle>
      </mat-button-toggle-group>
    </div>
    <mat-error *ngIf="form.get('age').hasError('ageInvalid')">age or unit error</mat-error>
  </ng-container>
</div>

Answer 1

In short, you could try following syntax for getting the value of a FormControl inside a FormGroup:

const ageNum = this.form.get(['age', 'ageNum']).value;
const ageUnit = this.form.get(['age', 'ageUnit']).value;

However, a similar question has already been answered, go there for more possiblities and details: How to get Nested formgroup's controls in angular