时间戳

首页 > 解决方案 > 表单值未填充，因为来自服务

angular - 表单值未填充，因为来自服务

问题描述

我正在 Angular 5 中在带有选择框和文本字段的材料弹出窗口中构建一个表单。选择框值来自服务。但是，该服务花费了太多时间，并且在该表单出现之前，用户没有获得选择框的值。仅在一段时间后才会填充选择框值。我该如何解决这个问题？

标签： angularangular-forms

解决方案

无论哪种方式，您都必须等待您的服务获取数据。

如果您的问题是用户可以在创建选项之前使用选择，请仅在一切准备就绪时显示表单（或者如果您想更具体，仅在已获取其数据时显示选择）。

在您的组件中，您获取数据的位置：

public showForm = false;

this.getDataService(param).subscribe((data) => {
    // All your logic here
    this.showForm = true;
}

在您的模板中：

<form [formGroup]="form" *ngIf="showForm">
    <!-- Your form template here -->
<form>

这样，当数据尚未到达时，您的表单将不会显示，并且一旦获取数据并且表单已经完全构建，表单就会显示出来。

或者，您可以仅在获取数据后构建表单（这样，您将不再需要布尔值）：

public form: FormGroup = null;

this.getDataService(param).subscribe((data) => {
    // All your logic here
    // Here, controls is your array of FormControl.
    this.form = new FormGroup(controls);
}

并在您的模板中：

<form [formGroup]="form" *ngIf="form">
    <!-- Your form template here -->
<form>

推荐阅读