How to get the value of nested form with get in formbuilder?

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>

I think that it need to you. stackblitz.com/edit/formbuilder?file=app%2Fapp.component.html — LihnNguyen
– LihnNguyen, Commented Aug 11, 2022 at 2:34
1.**not** use ngModel and formControlName in the same tag, 2.remove the [ and ] when create the formGroup -unless you want a formArray-.3.- (optional) you can use "dot notation": const ageNum = this.form.get('age.ageNum') — Eliseo
– Eliseo, Commented Aug 11, 2022 at 7:13

LeBavarois · Accepted Answer · 2022-08-11 07:15:13Z

0

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

answered Aug 11, 2022 at 7:15

LeBavarois

1,2382 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get the value of nested form with get in formbuilder?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related