Чтение элементов формы в свойство компонента

Question

Я пытаюсь прочитать значения атрибутов HTML-элементов, таких как тег ввода в угловых 2. Мой предпочтительный способ прочитать это было бы связать элемент ввода со свойством компонента, не создавая другой класс модели

Два из известных мне решений:

1) Использование объекта JSON: создайте ссылочную переменную для формы:

<form (ngSubmit)="onSubmit(loginForm)" #loginForm="ngForm"> 

и мой компонент входа станет

onSubmit(form:NgForm){
    console.log(form.value);
}

2) Создайте объект модели и инициализируйте его в компоненте

user=new User();
onSubmit(form:NgForm){
   console.log(user.username); 
}

и в HTML

<input type="text" id="username" name="username" 
            [(ngModel)]="user.username" #username="ngModel"/>

Но я не хочу использовать какой-либо из вышеупомянутых подходов (не хочу использовать объект JSON, НОР не хочу создавать объект модели для каждой представленной формы... должен ли я?)

Я хочу связать атрибуты компонента, чтобы сформировать напрямую. Так как то так

Я хочу прочитать, что пользователь вводит в элементе ввода username напрямую в свойство LoginComponent username (фокус на [(ngModel)]="username" вместо [(ngModel)]="user.username"

<form (ngSubmit)="onSubmit()" #loginForm="ngForm">
                <input type="text" id="username" name="username"     [(ngModel)]="username" #username="ngModel"/>
                {{username}}           
      <button type="submit">Login</button>
 </form>

@Component({'
.. something
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
   username:string;
  onSubmit(){
    console.log(username);
    console.log(user?.username);
  }  
}

РЕДАКТИРОВАТЬ Я пытался использовать "это"

onSubmit(){
    console.log(this.username);
  }

но я получил ошибку: zone.js:632 Ошибка: необработанная (в обещании): ошибка: невозможно присвоить ссылку или переменную!

Error: Cannot assign to a reference or variable!
 Thanks in advance for the help