angular / angular/components

[MatStepper] FormControlLike is not compatible with FormGroup

Open
#15,859 4 comments 15 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: material/stepper P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

What is the expected behavior?

The stepControl attribute of the CdkStep/MatStep classes should be castable to/assignable from a FormGroup or FormArray.

What is the current behavior?

Conversion of type 'FormControlLike' to type 'FormGroup' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Property 'controls' is missing in type 'FormControlLike'.
Happens during compilation when trying to cast FormControlLike to a FormGroup.

Type FormGroup is not assignable to type FormControlLike
Is the warning shown in HTML files when trying to assign a FormGroup to the stepControl input of a MatStep.

What are the steps to reproduce?

Create a MatStepper with a FormGroup assigned to a stepControl of one of the MatSteps. To reproduce the compilation issue, try to cast the stepControl of one step into a FormGroup within a TypeScript function.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material Version 7.3.7

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the compilation issue with Angular Material 7.3.7 and TypeScript using a MatStepper whose MatStep stepControl is a FormGroup. Inspect the CdkStep/MatStep stepControl typing first; done means FormGroup and FormArray assignments and casts compile without the reported errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.