Angular Validation Weird Error

Question

I have a angular material stepper with one form field the validation seems to work, as in if nothing has been selected, you will not be advance. However, I get an console error and don't know what it means.

Here is my HTML:

<mat-horizontal-stepper linear #stepper>
    <mat-step [stepControl]="frmUserDetails">
        <ng-template matStepLabel>Service User Details</ng-template>
        <form [formGroup]="frmUserDetails" name="frmUserDetails">
            <mat-form-field>
                <mat-select placeholder="Profile Type" formControlName="profileType" required>
                    <mat-option *ngFor="let type of baseAnswersMin" [value]="type">
                        {{ type }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </form>
        <button mat-raised-button matStepperNext class="nav-btn pull-right">Next</button>
    </mat-step>

    <mat-step [stepControl]="step2.frmDrugUse">
        <ng-template matStepLabel>Drug Use</ng-template>
        <step-two-component #step2></step-two-component>
    </mat-step>

</mat-horizontal-stepper>

Here is the typescript behind that

import { Component, ViewChild, Input } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { StepOneComponent } from './step-one/step-one.component';
import { StepTwoComponent } from './step-two/step-two.component';
import { StepThreeComponent } from './step-three/step-three.component';

@Component({
    selector: 'create-profile-component',
    templateUrl: './create-profile.component.html',
    styleUrls: ['./create-profile.component.css']
})

export class CreateProfileComponent {
    stepOne: any;
    frmUserDetails: FormGroup;


    baseAnswersMin = ['Yes', 'No', 'Declined to Answer'];

    constructor(private fb: FormBuilder) { 
        this.stepOne = {

        };
    }
    public ngOnInit() {
        this.frmUserDetails = this.fb.group({
            profileType: ['', Validators.required],
        });


    }    

}

And here is the console error,

ERROR TypeError: Cannot read property 'name' of undefined
    at checkBindingNoChanges (core.js:9912)
    at checkNoChangesNodeInline (core.js:13961)
    at checkNoChangesNode (core.js:13935)
    at debugCheckNoChangesNode (core.js:14764)
    at debugCheckDirectivesFn (core.js:14666)
    at Object.eval [as updateDirectives] (CreateProfileComponent.html:17)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14648)
    at checkNoChangesView (core.js:13773)
    at callViewAction (core.js:14126)
    at execComponentViewsAction (core.js:14078)

The developer tools the error is coming from:

<mat-option *ngFor="let type of baseAnswersMin" [value]="type">

EDIT: Here is step 2 component as requested:

Typescript:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CreateProfileComponent } from '../create-profile.component';
import { Observable } from 'rxjs/Rx';
import { ProfileService } from '../../../services/profile-service';
import { LookupInterface } from '../../../interfaces/lookup-interface';

@Component({
    selector: 'step-two-component',
    templateUrl: './step-two.component.html',
    styleUrls: ['../create-profile.component.css']
})
export class StepTwoComponent implements LookupInterface {
    lookups: any;
    frmDrugUse: FormGroup;
    stepTwo: any;

    constructor(private formBuilder: FormBuilder, private profileService: ProfileService) {
        this.stepTwo = {
            ageAtFirstUse: null
        };
    }

    ngOnInit() {
        this.frmDrugUse = this.formBuilder.group({
            ageAtFirstUse: ['', Validators.required]
        });

        this.setLookups();
    }

    setLookups() {
        this.lookups = new Object();
        this.profileService.getLookups(2).subscribe(data => {
            this.lookups = data;
        }, err => console.error(err))
    }

}

HTML

<div>
    <mat-card-title>Drug Use</mat-card-title>
    <mat-card-subtitle>Complete the below fields regarding the service user's history with drugs</mat-card-subtitle>
</div>

<form [formGroup]="frmDrugUse" name="frmDrugUse">
    <mat-form-field>
        <input type="number" matInput placeholder="Age First Used Drugs">
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Current Injecting Status">
            <mat-option *ngFor="let status of lookups.injectingStatus" [value]="status.value">{{ status.value }}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Main Drug Injected">
            <mat-option *ngFor="let drug of lookups.drug" [value]="drug.id">{{ drug.value }}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Main Drug of Choice">
            <mat-option *ngFor="let drug of lookups.drug" [value]="drug.id">{{ drug.value }}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Injection Site" multiple>
            <mat-option *ngFor="let injectionSite of lookups.injectionSite" [value]="injectionSite.value">{{ injectionSite.value }}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Other Drugs Use" multiple>
            <mat-option *ngFor="let drug of lookups.drug" [value]="drug.id">{{ drug.value }}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Shares Equipment">
            <mat-option *ngFor="let value of baseAnswersMin" [value]="value">{{ value }}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Consumes Alcohol">
            <mat-option *ngFor="let value of baseAnswersMin" [value]="value">{{ value }}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <input type="number" matInput placeholder="Alcohol Days in Month">
    </mat-form-field>

    <mat-card-actions>
        <button mat-raised-button matStepperNext class="nav-btn pull-right" style="margin-left:5px;">Next</button>
        <button mat-raised-button matStepperPrevious class="nav-btn pull-right">Previous</button>
    </mat-card-actions>

</form>

You got ExceptionHasChangedAfterItWasChecked but with angular bug — yurzui
– yurzui, Commented Jan 29, 2018 at 13:48

yurzui · Accepted Answer · 2018-01-29 14:18:02Z

1

Your error comes from this part:

<mat-step [stepControl]="step2.frmDrugUse">
  <step-two-component #step2></step-two-component>

Check it in live example

You're refering to the property that is not initialized by the time when angular checks stepControl binding.

To work around it your could use Promise in StepTwoComponent:

step-two.component.ts

ngOnInit() {
  Promise.resolve(null).then(() => {
    this.frmDrugUse = this.formBuilder.group({
      ageAtFirstUse: ['', Validators.required]
    });

    this.setLookups();
  })
}

step-two.component.html

<form *ngIf="frmDrugUse" [formGroup]="frmDrugUse" name="frmDrugUse">
      ^^^^^^^^^^^^^^^^^
     add also this

Example

answered Jan 29, 2018 at 14:18

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Collectives™ on Stack Overflow

Angular Validation Weird Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related