Property 'controls' does not exist on type 'AbstractControl'

I’m submitting a

[x] bug report

Current behavior As there’s no clean access to the FormGroup’ controls, currently there’s a ng build -prod error related to types when you try to access the .controls property, and AbstractControl does not have that property:

ERROR in ng:///path/to/app/my/custom.component.html (7,10): Property 'controls' does not exist on type 'AbstractControl'.

https://github.com/angular/angular/blob/4.0.0/packages/forms/src/model.ts#L834

where I have a form with subgroups like:

this.inputForm = this._builder.group({
  base: this._builder.group({
    monthly: [
      '', Validators.compose([Validators.required, Validators.pattern(regInt)])
    ],
   ...
  }),
  user: this._builder.group({
    ...
  })
});

and perform template-driven validations per row like:

<div class="form-group row" [ngClass]="{'has-danger': inputForm.controls.base.controls.monthly.dirty && !inputForm.controls.base.controls.monthly.valid}">
  <label class="col-4 col-form-label" for="inp-monthly">
    Monthly Expenses
  </label>
  <div class="col-8">
    <div class="input-group">
      <span class="input-group-addon" id="inp-monthly-s">$</span>
      <input class="form-control" id="inp-monthly" formControlName="monthly" aria-describedby="inp-monthly-s"
        type="number" min="1" placeholder="Add up all your costs (rent, salary, telephone, internet, inventory costs, etc)" />
    </div>
    <div class="form-control-feedback" [hidden]="inputForm.controls.base.controls.monthly.pristine || inputForm.controls.base.controls.monthly.valid">
     Please enter a quantity.
    </div>
  </div>
</div>

Expected behavior ng build -prodto compile without Type errors.

Minimal reproduction of the problem with instructions References to this issue are in this ticket: https://github.com/angular/angular/issues/10192#issuecomment-264246375

• Angular version: 4.0.1 Project built with angular/cli 4.0.0 but packages updated today to 4.0.1