0

I'm trying to reproduce the first overview from here and I can't get to the last step of the stepper because the second step is never accepted, even though I write something in the input assigned to the queryCtrl control. Here's my code:

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

Here's what I already know: the queryCtrl control's value doesn't get updated when I enter values in the input field they are assigned to. I tried several variations, like placing the input in the first step, but the same thing happened. I'm probably missing something trivial, but I an inexperienced with angular, so some help would be appreciated.

1 Answer 1

2

It's because of a spelling typo...

You put:

formContorlName="queryCtrl">

When it should be :

formControlName="queryCtrl">

Cheers.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.