Angular——反应形式答案

【问题标题】：Angular -- Reactive FormsAngular——反应形式
【发布时间】：2018-11-30 16:49:57
【问题描述】：

我正在创建一个带有输入字段的表单。有一些来自 REST API 的默认输入字段值。

这是我的模板：

<form [formGroup]="form" (ngSubmit)="action()">
    <input type="text" formControlName="name" [value]="fromApi(name)">
</form>

还有我的 TS 代码：

 this.form = new FormGroup({name:new FormControl('')})

客户端从 API 获得了他的默认值。他可以更改输入字段中的数据。

有两种可能：

1) 他确实改变了来自 API 的初始值。在那种情况下，当我控制台记录 FormGroup 时，我得到了他输入的新值，这太完美了！

2) 他不想更改 API 的值。这就是我的问题：在这种情况下，输入名称的值是 ''（来自 FormControl 的值）。我想从 API 中获得价值。

有可能吗？谢谢

【问题讨论】：

不使用 [value]，看看stackoverflow.com/questions/48337798/… 并使用函数填写表格

标签： angular rxjs angular-reactive-forms

【解决方案1】：

你可以试试这个：

ngOnInit(){
     this.form = new FormGroup({name:new FormControl('')});
     this.fromApi();
}

fromApi(){
    //inside the subscribe method of the api called
    let valueFromAPI = 'Example';
    this.form.controls.name.setValue(valueFromAPI);
}

或

this.fromApi('name');

fromApi(control){
    //inside the subscribe method of the api called
    let valueFromAPI = 'Example';
    this.form.controls[control].setValue(valueFromAPI);
}

【讨论】：

谢谢。您的解决方案有效，但我的示例非常简单。我的真实表单非常复杂，有来自不同 URL 的大量 API 调用。我希望我能找到没有任何代码的解决方案！
无论您从哪个 API 获取值，在其 subscribe 函数中，您都可以使用表单的 setValue 方法。
你甚至可以让它动态化。查看更新的解决方案。
通常您从 API 获得一个对象，并且您希望在表单中反映数据。我不明白使用 setValue，最好在创建 FormControl 时给出值
在多个API调用获取值的情况下，您不能以同步的方式等待所有API的响应然后创建表单。您必须管理相同的添加和编辑功能。

【解决方案2】：

确实如此。触发您的方法以从组件ngOnInit 钩子中的 api 获取，一旦您取回数据（在订阅中，我猜）@ 987654322@ 的 formControl。

【讨论】：