在Angular 2中为文本输入添加默认值

Question

背景

我有一个包含用户电子邮件地址的输入字段的表单。我正在使用插值将电子邮件添加到placeholder字段中。

问题

我不希望用户能够更改此字段中的电子邮件地址。我只想让他们看到它。但是我确实希望在提交表单时将其发布。

问题

我尝试了不同的方法，无论如何，form都不会发布电子邮件。如何绑定它，以便在提交表单时实际上可以发布电子邮件地址？

示例

我尝试使用readonly。这样他们就无法更改它。

 <input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}" readonly>

我没有使用readonly，只是想试试如果不添加任何限制标志是否能正常工作。

 <input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}">

我知道这个电子邮件地址是可以访问的，因为我将其添加到占位符字段中，并且在表单中显示出来。只是无法提交。

- wuno

---

也许您可以添加一个额外的HTML“hidden”控件，使用相同的插值...不确定是否符合您的要求。 - refactor

可能会有帮助：https://dev59.com/DPD0s4cB2Jgan1znZ7PV#76206452 - S M

Answer 1

默认值将是分配给personal.email的值。

或者，您可以绑定到不同的属性。

[(ngModel)]="personalEmail"

并分配一个默认值给 personalEmail，在提交时更新代码中的 persona.email 或使用其他方法。

[ngModel]="personalEmail" (ngModelChange)="personal.email = $event"

从personalEmail中获取初始值，并在更改时更新personal.email。

这也可能有效（未尝试）。

[ngModel]="personal.email || 'defaultValue'" (ngModelChange)="personal.email = $event"

只有在personal.email为null时，才会分配'defaultValue'

- Günter Zöchbauer

Answer 2

这里的模型是 personal.email，默认值为 auth.user.email

<input type="text" class="form-control" id="email" [(ngModel)]="personal.email = auth.user.email" name="email" #email="ngModel">

- Asha Joshi

---

解析器错误：绑定不可以在列8包含赋值 [personal.email = '']。 - Michael McKenna