将禁用输入字段中的值设置为 ngModel

Question

我是 angular5 和 spring 的新手，我需要与数据库进行角度通信的帮助。

我需要进行用户注册，为此我使用了 auth0（这是基本的注册，只有电子邮件和密码），现在我需要收集更多关于用户的数据（电子邮件、姓名、城市、电话等）并编写它进入数据库。

我想使用用于注册的电子邮件（我不想让用户重复它）并将其传递给数据库。我可以获取 auth0 中使用的电子邮件（在我的代码中，我将它放在 this.userEmail 中，例如下面的示例），但我不知道如何通过 html 部分进一步传递它。

这是我如何输入用户名的示例，它工作正常。我试图为电子邮件做类似的事情，但它不起作用，我不明白为什么也不知道我应该怎么做......请帮助

<label>Name:</label>
<mat-form-field>
    <input matInput type="text" placeholder="Name"
        [(ngModel)]="user.firstName" name="firstName" #name>
</mat-form-field>

这个悲伤的尝试：

<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>

另外，我知道上面的内容完全磨损了，ngModel 和输入字段的值这样放置是行不通的，但我想（也许）更好地描述我想要实现的目标 :) 而且我知道我可以使用 auth0 中的规则来收集有关用户的更多数据，但是对于某些学校的条件，我们仅限于这种方式：/

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;
}

我也会考虑完全不显示电子邮件输入。毕竟，如果用户已经给了你电子邮件，为什么要把他们与这个禁用的输入混淆呢？