title: How can I cast an AbstractControl to a FormControl in a template?
body: <p>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.</p>
  <p>However when I do form.get('controlName'), it returns an AbstractControl, and when I try to pass the AbstractControl to the <code>[formControl]</code> directive of the button I get an error saying that <code>Type AbstractControl is not assignable to abstract control</code>.</p>
  <p>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.</p>
  <p>The form</p>
  <pre><code>this.form = this._formBuilder.group({
        cost: this._formBuilder.control(''),
        width: this._formBuilder.control('')
      })
  </code></pre>
  <p>First child template</p>
  <pre><code>&lt;app-form-subsection-cost [subsectionFormControl]=&quot;form.get('cost')&quot;&gt;&lt;/app-form-subsection-cost&gt;
  </code></pre>
  <p>Second child</p>
  <pre><code>export class FormSubsectionCostComponent implements OnInit {
  
    @Input() subsectionFormControl: AbstractControl;
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p>Second child template</p>
  <pre><code>&lt;button [formControl]=&quot;subsectionFormControl as FormControl&quot; value=&quot;Yes&quot;&gt;Yes&lt;/button&gt; //Error on formControl directive
  </code></pre>
  <p>I can't do this:</p>
  <pre><code>&lt;app-form-subsection-cost [subsectionFormControl]=&quot;form.get('cost')&quot;
  [subsectionFormControl]=&quot;form.get('cost') as FormControl&quot;&gt;&lt;/app-form-subsection-cost&gt;
  </code></pre>