Angular 角度误差

我有一个

角度材料步进器

，其中有一个

表单字段

验证似乎有效，如果没有选择任何内容，您将无法前进。然而，我得到了一个控制台错误，不知道这意味着什么

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

这是控制台错误

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">

HTML

吸毒
填写以下有关服务用户用药史的字段
{{status.value}}
{{drug.value}
{{drug.value}
{{injectionSite.value}
{{drug.value}
{{value}}
{{value}}
下一个
以前的

---

您的错误来自此部分：

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

第二步.component.html

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

^^^^^^^^^^^^^^^^^
再加上这个

---

您得到的例外情况已更改，但由于角度错误，您能否发布

第二步组件

？跟随编辑的帖子。。。。

<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>

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

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

    this.setLookups();
  })
}

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