在angular7中通过api响应创建动态表单

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { HttpClient } from '@angular/common/http';

export class MyComponent implements OnInit {
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('api/endpoint').subscribe(response => {
      // 处理API响应数据
    });
  }
}

import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

export class MyComponent implements OnInit {
  form: FormGroup;

  constructor(private http: HttpClient, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.http.get('api/endpoint').subscribe(response => {
      this.buildForm(response);
    });
  }

  buildForm(data) {
    const formControls = {};
    // 根据API响应数据动态生成表单控件
    for (const field of data.fields) {
      formControls[field.name] = new FormControl(field.value || '');
    }
    this.form = this.formBuilder.group(formControls);
  }
}

<form [formGroup]="form">
  <div *ngFor="let controlName of form.controls | keys">
    <label>{{ controlName }}</label>
    <input [formControlName]="controlName">
  </div>
</form>