Question

我正在尝试开发一个角度为5的表单，其默认值来自API服务，我只是想在初始化formbuilder时分配默认值。如果我使用subscribe()或toPromise()

，也会得到相同的结果

Component.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>

但是像这样，我收到控制台错误，因为settingsForm为空。

错误错误：formGroup需要一个FormGroup实例。请通过一个内。

Answer 1

未定义指出，在渲染模板时未定义表单。

最简单的解决方案是使用

定义表单

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

在此处查看ngIf。

Answer 2

发生这种情况是因为您没有等待后端的响应来创建指向仍未定义的formGroup的HTML元素。您需要做的是同步创建一个空窗体，然后在后端最终响应时使用setValue方法用值更新它。另外，您可以在组件中添加一个名为loaded的布尔值，当服务器响应时为true，然后在HTML表单上使用*ngIf="loaded"。

Angular 5组FormBuilder，填充来自Observable或Promise的默认值

2 个答案: