Angular中具有预定义值的输入数据绑定答案

【问题标题】：Data binding of an input with a predefined value in AngularAngular中具有预定义值的输入数据绑定
【发布时间】：2018-04-18 16:27:14
【问题描述】：

我想要一个具有电子邮件提供商价值的预定义输入表单。我的情况是不修改，在提交时，它应该将 gmail.com 值上传到 firebase，但它不会上传任何内容，除非我从输入表单中删除该值并重写。

<input class="button" value="gmail.com" formControlName="emailProvider">

谁能告诉我应该修改什么才能工作？

【问题讨论】：

【解决方案1】：

模板驱动的表单：

<input class="button" [(ngModel)]="value">

class MyComponent {
  value = 'gmail.com'
}

反应形式：

<input class="button" [formControl]="ctrl">

class MyComponent {
  ctrl = new FormControl('gmail.com');
}

【讨论】：

【解决方案2】：

我认为这可能会奏效：

1) 从输入中删除 value 属性；

2) 在您的 FormGroup 实例化中创建 emailProvider FormControl 时，将前者的初始值设置为“gmail.com”

emailProvider: new FormControl('gmail.com')

通过这样做，FormControl 的初始值将是“gmail.com”，并且应该能够被用户的输入覆盖。

【讨论】：