Cannot assign to a reference or variable! Angular 6

Question

I am creating an validation form using Ionic 3 and Angular 6 but I am running into a problem. When I run my application I get these error messages

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot assign to a reference or variable!
Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26396)
    at PropertyWrite.visit (compiler.js:4681)
    at convertActionBinding (compiler.js:25820)
    at compiler.js:28420
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (compiler.js:28416)
    at nodes.(:8101/anonymous function) (http://localhost:8101/build/vendor.js:119225:27)
    at compiler.js:28361
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (compiler.js:28360)
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26396)
    at PropertyWrite.visit (compiler.js:4681)
    at convertActionBinding (compiler.js:25820)
    at compiler.js:28420
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (compiler.js:28416)
    at nodes.(:8101/anonymous function) (http://localhost:8101/build/vendor.js:119225:27)
    at compiler.js:28361
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (compiler.js:28360)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)

and I believe the reason I am getting these error messages is when I add this line of code to my "ion-input" tag

[ngClass]="{'is-invalid':f.submitted && email.invalid}"

I double check my work to make sure it matches a tutorial and I still can't find where the bug is forming. Can someone please lend a hand? Here is my code

HTML

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>profile</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form name="form" #f="ngForm" novalidate>
  <ion-list>
    <ion-item>
        <ion-label for="email" fixed>email</ion-label>
        <ion-input type="email" [(ngModel)]="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{'is-invalid':f.submitted && email.invalid}" name="email" class="form-control" required></ion-input>
        <div class="invalid-feedback">
          <div>Email is required</div>
        </div>
    </ion-item>
    <button ion-button block type="button" (click)="login()" > Sign In</button>
    <button ion-button block outline type="button" (click)="goToSignup()" > Sign Up</button>
</ion-list>
</form>
</ion-content>

TS File

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { SignupPage } from '../signup/signup';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormsModule } from '@angular/forms';
/**
 * Generated class for the ProfilePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {

  email: string;
  password : string; 
  model:any = {}
  constructor(public aAuth : AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  login(){
   this.aAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(
     e => {console.log(e)}
     )
  }

  goToSignup(){
    this.navCtrl.push(SignupPage)
  }

}

Answer 1

You have used two ngModel to point to different variables. Remove the one which is not required.

<ion-input type="email" [(ngModel)]="email" [(ngModel)]="model.email" ....