How can I cast an AbstractControl to a FormControl in a template?

Question

I have a FormGroup that I'm passing from a parent component to a child, and then within that FormGroup there's a control that I'm passing from the first child to a second child. However I then want to use the control in a button so that I can alter the state of the formgroup using it.

However when I do form.get('controlName'), it returns an AbstractControl, and when I try to pass the AbstractControl to the [formControl] directive of the button I get an error saying that Type AbstractControl is not assignable to abstract control.

Usually I'd just cast the control to a FormControl in my component but this won't work as I'm using the control directly in the template.

The form

this.form = this._formBuilder.group({
      cost: this._formBuilder.control(''),
      width: this._formBuilder.control('')
    })

First child template

<app-form-subsection-cost [subsectionFormControl]="form.get('cost')"></app-form-subsection-cost>

Second child

export class FormSubsectionCostComponent implements OnInit {

  @Input() subsectionFormControl: AbstractControl;

  constructor() { }

  ngOnInit(): void {
  }

}

Second child template

<button [formControl]="subsectionFormControl as FormControl" value="Yes">Yes</button> //Error on formControl directive

I can't do this:

<app-form-subsection-cost [subsectionFormControl]="form.get('cost')"
[subsectionFormControl]="form.get('cost') as FormControl"></app-form-subsection-cost>

Thor Thor · Accepted Answer · 2021-01-25T18:33:12

What I do is define a method in my component to return the FormControl with a given name.

  fc(name) { return this.form.get(name) as FormControl; }

Then use it in the template:

  [formControl]="fc('subsectionFormControl')

How can I cast an AbstractControl to a FormControl in a template?

2 Answers