CODEWITHSUNDEEP
validationangularangular-reactive-forms
Ihor Lavs
Ihor Lavs

Reputation: 2463

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

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>

Upvotes: 1

Views: 2660

Answers (1)

yurzui
yurzui

Reputation: 214017

Use 

annoucementForm.get('address.country')

or

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

instead of

annoucementForm.get('country')

Upvotes: 10

Related Questions