Setting value from disabled input field into ngModel - html

Question

I'm new to angular5 and spring and I need help with angular communication with database.
I need to make user registration, and for it I used auth0 (it's basic registration with just email and password), now I need to collect more data about user (email, name, city, phone, etc) and write it into database.
I want to use the email used for registration (i don't want to make user have to repeat it) and just pass it to the database. I can get the email used in auth0 (in my code i place it in this.userEmail, for examples below), but I dont't know how to pass it further through html part.
This is the example how I made input for user's name and it works fine. I tried to make similar for email, but it won't work and I don't get why nor how I should actually do it... help please
<label>Name:</label>
<mat-form-field>
<input matInput type="text" placeholder="Name"
[(ngModel)]="user.firstName" name="firstName" #name>
</mat-form-field>
and this sad try:
<label>E-mail address:</label>
<mat-form-field>
<input matInput type="text" placeholder=""
[(ngModel)]="user.email" value="{{this.userEmail}}" name="email"
disabled #name>
</mat-form-field>
also, i know this above is totally worng, ngModel and value of input field put like this won't work, but i wanted to (maybe) describe better what I wanted to achieve :)
and i know i could use rules in auth0 for collecting more data about user, but for certain school's conditions we are restricted to this way :/

Answer 1

component.html
<mat-form-field>
<input matInput [ngModel]="user.email" name="email" disabled>
</mat-form-field>
component.ts
ngOnInit() {
this.user.email = this.userEmail;
}
I would also consider not showing the email input at all. After all, if the user has already given you the email, why confuse them with this disabled input?