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

Question

我使用本教程创建了一个 DynamicForm 项目，它工作正常。

https://medium.com/@mail.bahurudeen/create-a-dynamic-form-with-configurable-fields-and-validations-using-angular-6-994db56834da

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

因此，我从服务器请求表单 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'];
      });
  }
}

和 DynamicFormComponent 到这个：

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);
    });
  }
}

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

如何创建动态表单，其中服务器确定显示哪些字段，哪些不取决于输入值？

此致

标签： angularformshttp