Property … does not exist on type ‘{ [key: string]: AbstractControl; }’

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior When compiling a form with AoT I’ll get:

Property 'email' does not exist on type '{ [key: string]: AbstractControl; }'.

First I thought it was a bug in Ionic which reported. They stated that it was a code issue: https://github.com/driftyco/ionic-app-scripts/issues/100#issuecomment-251790964, but it looks like it has something to do with AoT.

More people reported this error see: https://forum.ionicframework.com/t/property-does-not-exist-on-type-key-string-abstractcontrol/65783 and https://forum.ionicframework.com/t/deploy-to-android-phone-show-white-page-after-upgrade-to-2-0-0-rc-0/66283/5

Expected behavior When you create a variable to store a FormGroup with the type FormGroup there shouldn’t be an error:

Minimal reproduction of the problem with instructions

recoverPasswordForm: FormGroup;

constructor(

    fb: FormBuilder) {

    this.recoverPasswordForm = new FormGroup({
        email: new FormControl([navParams.get('username') || '', Validators.compose([Validators.required, ValidatorService.email])),
    });

}

changing recoverPasswordForm: FormGroup; into recoverPasswordForm = null; solves the problem

What is the motivation / use case for changing the behavior? This is used for forms

Please tell us about your environment: OSX, Vscode, npm, Ionic2 RC0

• Angular version: 2.0.X

• Browser: Chrome / All

• Language: Typescript

• Node (for AoT issues): node --version = v6.7.0

[DzmitryShylovich]

Replace <form-error [control]="recoverPasswordForm.controls.email" error="required">{{ 'errors.fieldRequired' | translate }}</form-error> with <form-error [control]="recoverPasswordForm.get('email')" error="required">{{ 'errors.fieldRequired' | translate }}</form-error>

Also see https://github.com/qdouble/angular-webpack2-starter#aot--donts

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}