将默认值添加到文本输入角度2

时间:2016-11-30 07:03:32

标签: javascript angular typescript

背景

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

问题

我不希望用户能够在此字段中更改电子邮件地址。我只希望他们能够看到它。但我确实希望它与表格一起发布。

问题

我不断尝试不同的方式,无论form没有post电子邮件。我如何bind它以便在表单为post时实际submitted电子邮件地址?

实施例

我尝试了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}}">

我知道电子邮件是可访问的,因为我将其添加到占位符字段并显示在表单中。它不会发布。

2 个答案:

答案 0 :(得分:11)

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

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

[(ngModel)]="personalEmail"

并将默认值分配给personalEmail并在代码中提交更新persona.email或使用

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

personalEmail获取初始值并在发生更改时更新personal.email

这可能也有效(未尝试)

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

仅在'defaultValue'personal.email

时才分配null

答案 1 :(得分:-1)

此处模型为personal.email,默认值为auth.user.email

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