即使用户在输入框中没有输入任何内容，也让 Angular 在发送表单时使用初始输入数据答案

【问题标题】：Get Angular to use initial input data while sending form even if user entered nothing inside input box即使用户在输入框中没有输入任何内容，也让 Angular 在发送表单时使用初始输入数据
【发布时间】：2019-09-08 17:33:35
【问题描述】：

我有以下输入表单组件

<input class="form-control" #FirstName="ngModel" name="FirstName" [(ngModel)]="formModel.FirstName" value="{{userProfile?.firstName}}">

我在渲染页面时渲染一些初始数据。

我的目标是在提交此表单时发送此初始数据，即使用户在表单中没有输入任何内容。我怎样才能实现它？

【问题讨论】：

标签： html angular forms input

【解决方案1】：

对于这个特定的用例，我建议您使用响应式表单。因为您可以使用 formControl 并将默认值添加为 formControl 的一部分。

formItem = new FormControl('default Value');
onSubmit(){
data = this.formItem.value;
}

如果我们使用模板驱动的表单我们可以使用 NgSubmit 指令并添加相关逻辑以从您提供的模板引用中选择数据。

模板驱动的表单： https://angular.io/guide/forms#submit-the-form-with-ngsubmit

反应式表单 https://angular.io/guide/reactive-forms#step-2-generating-and-importing-a-new-form-control

【讨论】：

如果我手动输入一些默认值，一切都可以正常工作。问题是我调用了一些在呈现此页面的同时获取数据的方法。有没有办法先获取数据再声明formModel？？？
是的，所以在您的 onInit 生命周期中，您可以等待响应，根据该响应放置一个标志，该标志将为您的表单执行 ngIf，以便不呈现表单。下一部分是您可以通过循环响应并从对象中获取值并在创建 formControl 或 formModel 时将其设置为默认值来设置控件值。确保在响应绑定到您的 formModel 对象后呈现您的模板，或者在使用 fomrControl 时将其添加为默认值。