Handling Angular2 - 4 errors with nested form groups in reactive forms

Question

Guys I need some help with Angular 4 reactive forms. I have nested form-groups also works fine except Validation. But my app is crashing when I try to add some handling validation in my html markup.

my component code looks like:

createForm() {
    let options: any = {};

    for (let option of this.annoucementOptions) {
        options[option.title] = new FormControl(false);
    }

    let optionsFormGroup: FormGroup = new FormGroup(options);

    this.annoucementForm = this.fb.group({
        address: this.fb.group({
            country: ['', [Validators.maxLength(50)]],
            state: ['', [Validators.maxLength(50)]],
            city: ['', [Validators.required, Validators.maxLength(50)]],
            street: ['', [Validators.required, Validators.maxLength(50)]],
            apartment: ['', [Validators.required, Validators.maxLength(50)]],
        }),
        description: this.fb.group({
            title: ['', [Validators.required, Validators.maxLength(80)]],
            shortDescription: [''],
            livingPlaces: [''],
            room: [''],
            options: optionsFormGroup
        }),
        priceBlock: this.fb.group({
            price: ['', [Validators.required, Validators.maxLength(80)]],
            type: ['', [Validators.required, Validators.maxLength(80)]],
        }),
    });
}

and this is a piece of my template code:

<form class="form form-lg form-def" *ngIf="annoucementForm" (ngSubmit)="saveDetails(annoucementForm)"  name="annoucementForm" [formGroup]="annoucementForm">
<div class="form-block"  formGroupName="address">
    <h2 class="form-block-heading flag-label primary">Address</h2>

    <ul class="row form-list">
        <li class="col-md-6 col-lg-4 form-list-item">
            <md-input-container class="d-block">
                <input type="text" mdInput placeholder="*Country" formControlName="country">
            </md-input-container>

            <div  class="form-error text-danger"
                  *ngIf="annoucementForm.get('country').touched "
            >
                <p *ngIf="annoucementForm.get('country').hasError('maxlength')">
                    *This field be more than 35 characters long.
                </p>
            </div>
        </li>
   </ul>

ERROR TypeError: Cannot read property 'touched' of null at Object.eval [as updateDirectives] (ng:///AnnouncementEditorModule/AnnouncementEditor.ngfactory.js:4293:55) at Object.debugUpdateDirectives [as updateDirectives] (eval at <anonymous> (localhost:8081/vendor.js:13:1), <anonymous>:12867:21) at checkAndUpdateView (eval at <anonymous> (localhost:8081/vendor.js:13:1), <anonymous>:12279:14) at callViewAction (eval at <anonymous> (localhost:8081/vendor.js:13:1), <anonymous>:12594:17) — Ihor Lavs
As I understand, Angular doesn't can find my form control. But I don't know how to do it correctly with nested form-group. — Ihor Lavs

yurzui yurzui · Accepted Answer · 2017-04-03T09:45:33

Use

annoucementForm.get('address.country')

or

annoucementForm.get(['address', 'country'])

instead of

annoucementForm.get('country')

Handling Angular2 - 4 errors with nested form groups in reactive forms

1 Answers