Angular 5 input in a form doesn't update the formControl

Question

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.

Answer 1

It's because of a spelling typo...

You put:

formContorlName="queryCtrl">

When it should be :

formControlName="queryCtrl">

Cheers.