Angular 5 group FormBuilder，使用Observable或Promise填充默认值

我试图在angular 5中开发一个表单，默认值来自API服务，我只是试图在初始化

formbuilder

时分配默认值。如果我使用

subscribe（）

或

toPromise（）

组件。ts

settingsForm: any;

 constructor(
  private userService: UserService,
  private settingsService: SettingsService,
  private formBuilder: FormBuilder
 ) { }  

ngOnInit() {
    this.settingsService.getMetrics$()
    .toPromise().then(res =>{
      this.settingsForm = this.formBuilder.group({
        oee: [res.oee, Validators.required],
        fpy: [res.fpy, Validators.required],
        difsites: [res.difsites, Validators.required]
      });
    })
  }

HTML模板

 <form [formGroup]="settingsForm" (ngSubmit)="onSubmit()" style="margin-top: 15px">

                <div class="form-group">
                    <label for="oee">OEE:</label>
                    <input id="oee" class="form-control" type="text" formControlName="oee">
                </div>

                <div class="form-group">
                    <label for="fpy">FPY:</label>
                    <input id="fpy" class="form-control" type="text" formControlName="fpy">
                </div>

                <div class="form-group">
                    <label for="difsites">Diff. Sites:</label>
                    <input id="difsites" class="form-control" type="text" formControlName="difsites">
                </div>

                <button type="submit" [disabled]="!settingsForm?.valid" class="btn btn-primary">Save</button>
            </form>

OEE：
FPY：
不同地点：
拯救

但是像这样，我收到一个控制台错误，因为

settingsForm

为空

错误：formGroup需要一个formGroup实例。请递给我一个 在

---

发生这种情况是因为您没有等待后端的响应来创建指向该尚未定义的表单组的HTML元素。您需要做的是同步创建一个空表单，然后在后端最终响应时使用

setValue

方法用值更新它。或者，您可以在组件中添加一个布尔值，比如说名为

loaded

，当服务器响应时该值为true，然后在html表单上使用

*ngIf=“loaded”

。

发生这种情况的原因是您没有等待后端的响应来创建指向尚未定义的表单组的html元素。您需要做的是同步创建一个空表单，然后在后端最终响应时使用

setValue

方法用值更新它。或者，您可以在组件中添加一个布尔值，例如名为

loaded

，该值在服务器响应时为true，然后在html表单上使用

*ngIf=“loaded”

。

正如其未定义所指出的，在呈现模板时表单未定义

最简单的解决方案是使用

---

请参见此处的

ngIf

。

由于未定义，因此在呈现模板时未定义表单

最简单的解决方案是使用

---

请参见那里的

ngIf

。

你能发布你的构造函数和模板吗？ready@PeS我编辑了我的帖子你能发布你的构造函数和模板吗？ready@PeS我编辑了我的帖子