Error integrating Angular Material's chip component into my form

Question

I want to include the chip component in my form component. For this I use the chip from Angular Material.

https://material.angular.io/components/chips/examples#chips-form-control

The error appears: Type 'AbstractControl<any, any> | null' is not assignable to type 'FormControl'. Type 'null' is not assignable to type 'FormControl'.

I don't know what I have to do differently. I did it according to the instructions. https://stackoverflow.com/a/54136348/19648465

Can someone please help me?

Here is the code: https://stackblitz.com/edit/stackblitz-starters-6lpefu?file=src%2Fapp%2Fform%2Fform.component.html

Answer 1

You need to type cast it, by default all form controls and groups are Abstract Controls.

Add a function in form.component as below

  public get formControl () {
    return this.form.get("subTasks") as FormControl;
  }

And change you html as below

...
  <app-chip [control]="formControl"></app-chip>
...

This should compile the code for you. And check what angular version are you using and choose that version in the version dropdown as below and use according to the instructions.