Question

我有一个angular material stepper，其中一个form field验证似乎有效，因为如果没有选择任何内容，您将无法前进。但是，我收到了控制台错误，并且不知道它意味着什么。

这是我的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>

这是

背后的打字稿

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],
        });


    }    

}

这是控制台错误，

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)

错误来自的开发人员工具：

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

编辑：这是所要求的第2步组件：

打字稿：

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>

Answer 1

您的错误来自此部分：

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

在 live example

中查看

您正在引用角度检查stepControl绑定时未初始化的属性。

要解决此问题，您可以在Promise中使用StepTwoComponent：

<强>步骤-two.component.ts

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

    this.setLookups();
  })
}

<强>步骤-two.component.html

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

<强> Example

角度验证奇怪的错误

1 个答案: