Setting value from disabled input field into ngModel

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?