我试图重现here的第一个概述,但我无法进入步进器的最后一步,因为第二步从未被接受,即使我在分配给queryCtrl控件的输入。这是我的代码:
HTML:
<div>
<mat-horizontal-stepper [linear]="true">
<mat-step [stepControl]="criterionFormGroup">
<form [formGroup]="criterionFormGroup">
<ng-template matStepLabel>Select the filter criterion</ng-template>
<mat-form-field>
<mat-select placeholder="Criterion" formControlName="critCtrl" required>
<mat-option value="description">Description</mat-option>
<mat-option value="user">User</mat-option>
<mat-option value="status">Status</mat-option>
<mat-option value="unit">Unit</mat-option>
<mat-option value="created_timestamp">Created</mat-option>
<mat-option value="modified_timestamp">Modified</mat-option>
</mat-select>
</mat-form-field>
<button class="btn" mat-button matStepperNext>Next</button>
</form>
</mat-step>
<mat-step [stepControl]="filterValueForm">
<form [formGroup]="filterValueForm">
<ng-template matStepLabel>Specify the criterion</ng-template>
<mat-form-field>
<input matInput placeholder="Description contains..." formContorlName="queryCtrl">
</mat-form-field>
<button class="btn" mat-button matStepperNext>Next</button>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Finish</ng-template>
</mat-step>
</mat-horizontal-stepper>
</div>
TS:
import { Component, OnInit } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { FormGroupDirective } from '@angular/forms/src/directives/reactive_directives/form_group_directive';
export class Filter {
action;
name;
constructor(action, name) {
this.action = action;
this.name = name;
}
}
@Component({
templateUrl: 'filter.html'
})
export class FilterComponent implements OnInit {
criterionFormGroup: FormGroup;
filterValueForm: FormGroup;
criterion;
descriptionQuery;
constructor(private _formBuilder: FormBuilder) {
}
ngOnInit() {
this.criterionFormGroup = this._formBuilder.group({
critCtrl: ['', Validators.required]
});
this.filterValueForm = this._formBuilder.group({
queryCtrl: ['', Validators.required]
});
}
}
这是我已经知道的:当我在分配给它们的输入字段中输入值时,queryCtrl控件的值不会更新。我尝试了几种变体,比如在第一步中输入输入,但同样的事情发生了。我可能错过了一些微不足道的东西,但我没有经验的角度,所以一些帮助将不胜感激。
答案 0 :(得分:2)
这是因为拼写错误...
你说:
formContorlName="queryCtrl">
应该是:
formControlName="queryCtrl">
干杯。