Angular 来自服务器响应的动态表单

我用本教程创建了一个DynamicForm项目，效果很好

现在我想使用一个服务器，它最初提供表单状态并对表单中的更改做出反应

因此，我从服务器请求表单inital，并像这样更改AppComponent

export class AppComponent implements OnInit {

  @ViewChild(DynamicFormComponent) form: DynamicFormComponent;
  regConfig: FieldConfig[] = [];

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    this.getForm();
  }

  valueChange(value) {
    this.getForm(value.name);
  }

  getForm(name?) {
    let myParams = new HttpParams().set('lang', 'de');
    if (!!name) {
      myParams = myParams.set('name', name);
    }
    this.http.get('http://10.9.99.128:8080', {params: myParams})
      .subscribe((value) => {
        this.regConfig = value['formControls'];
      });
  }
}

以及其中的动态组件：

export class DynamicFormComponent implements OnChanges {

  @Input() fields: FieldConfig[] = [];
  @Output() submit: EventEmitter<any> = new EventEmitter<any>();

  form: FormGroup = this.fb.group({});

  constructor(private fb: FormBuilder) {
  }

  ngOnChanges() {
    this.form = this.createControl();
    this.form.valueChanges.subscribe((value) => {
      this.submit.emit(value);
    });
  }
}

导出类DynamicFormComponent实现OnChanges{
@输入（）字段：FieldConfig[]=[]；
@Output（）提交：EventEmitter=neweventemitter（）；
form:FormGroup=this.fb.group（{}）；
构造函数（私有fb:FormBuilder）{
}
ngOnChanges（）{
this.form=this.createControl（）；
this.form.valueChanges.subscribe（（值）=>{
this.submit.emit（值）；
});
}
}

现在我遇到的问题是，在输入一个值之后，我将请求发送到服务器，服务器用一个新的表单表示进行响应。但由于它是一种全新的形式，当前的领域将失去它的焦点。特别是对于输入字段，您必须在每个字母后再次单击该字段

如何创建一个动态表单，其中服务器确定显示哪些字段，哪些字段不依赖于输入值

致意