从 JSON 生成 Angular 表单答案

【问题标题】：Generate Angular form from JSON从 JSON 生成 Angular 表单
【发布时间】：2019-04-18 06:45:29
【问题描述】：

我想在运行时从 JSON 生成 Angular 6 响应式。我还需要字段级别的操作，例如如果它是下拉列表，我可以执行onchange 事件，对于其他字段，我们也需要相同的功能。我已经在网上搜索过，但无法找到解决方案。

【问题讨论】：

到目前为止你尝试过什么？您是否看过 Angular 文档中的 this 示例（它几乎准确地显示了您想要的内容）？
我已经尝试使用'medium.com/@mail.bahurudeen/…'链接..并且能够生成表单..但问题是我能够从按钮或任何其他字段调用一些自定义事件......
这个问题相当简短，在提出明确要求后没有任何解释。我会尝试暂时搁置它。

标签： angular angular6 angular-reactive-forms

【解决方案1】：

假设这是您的 json 数据，

data= {name:'name',adress:'some data'}

那么，你可以这样做

 constructor(private fb:FormBuilder){}

 ngOnInit() {samplefb=this.fb.group(userForm:this.fb.group({}));
 //after getting data i mean,service.getdata().toPromise().then(your code)

 (<FormGroup>this.samplefb.get('userForm')).addControl('name',this.fb.control(data.name));
 (<FormGroup>this.samplefb.get('userForm')).addControl('address',this.fb.control(data.address));


  }

希望这会奏效！

【讨论】：

【解决方案2】：

使用ngFor 和ngIf 迭代JSON 并显示正确的字段。

<div *ngFor="let item of items">
    <div *ngIf="item.type === 'dropdown'">...</div>
    <div *ngIf="item.type === 'otherType'"> </div>
</div>

更多信息，请点击以下链接：

NgForOf

NgIf

【讨论】：

不是他真正想要的 imo。他想将 JSON 数据“转换”为 Angular 表单。
@Zooly：如果是这样，我很抱歉，但对我来说，给定的信息不清楚。
@Zooly：鉴于他的新评论，他正试图完全按照我发布的内容行事。