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

Question

我是 angular5 和 spring 的新手，我需要有关 angular 与数据库通信的帮助。

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

我想使用用于注册的电子邮件（我不想让用户必须重复它）并将其传递到数据库。我可以获得 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>

另外，我知道上面这个完全是 worng，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;
}

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

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

Setting value from disabled input field into ngModel

html

angular

angular5

angular-ngmodel