在 Angular2 中使用来自 api 的默认数据填充动态表单

Question

我已经使用 angular2 几个星期了，我正在尝试为系统设置页面创建动态表单。 目标：让 api 返回任意数量的表单，在选项卡内构建表单，表单可以具有任何 type 字段，并使用默认或以前保存的数据填充这些表单，然后修改和保存。

有效的方法：使用任意数量的输入字段创建任意数量的表单。 我需要用数据填充表单的帮助。 这是从 api 调用生成的项目。需要填充这些猫科动物的数据我需要一个单独的 api 调用。 请记住，每个表单都可以有多个这些输入

<li [formGroup]="form" class="form-control-item">
<div [ngSwitch]="item.controlType">
    <div *ngSwitchCase="'text'">
        <label class="text-lable " [for]="item.key">{{item.label}}</label>
        <div [ngSwitch]="item.controlType">
            <input [formControlName]="item.key" [id]="item.key" [type]="item.type" class="validate form-control input-lg" input name="{{ name }}" ng-model="name">
        </div>
    </div>
    <div *ngSwitchCase="'checkbox'">
        <label class="label-checkbox" [for]="item.key">{{item.label}}
            <input [formControlName]="item.key" name="{{ item.key }}" ng-model="name" type="checkbox" class="validate form-control checkbox-with-label" >
        </label>
    </div>
    <!--Needs testing with appropriate data-->
    <!--<div *ngSwitchCase="'dropdown'">-->
        <!--<label [for]="item.key">{{item.label}}</label>-->
        <!--<input [formControlName]="item.key" [id]="item.key" [type]="item.type" class="validate form-control input-lg">-->
        <!--<select [id]="item.key" [formControlName]="item.key">-->
            <!--<option *ngFor="let opt of item.options" [value]="opt.key">{{opt.value}}</option>-->
        <!--</select>-->
    <!--</div>-->
    <div *ngSwitchCase="'radio'">
        <label [for]="item.key">{{item.label}}</label>
        <input [formControlName]="item.key" [id]="item.key" [type]="item.type" class="validate form-control radio" name="{{ item.key }}" ng-model="name">
    </div>
    <div *ngSwitchCase="'password'">
        <label [for]="item.key">{{item.label}}</label>
        <input [formControlName]="item.key" [id]="item.key" [type]="item.type" class="validate form-control input-lg" name="{{ item.key }}" ng-model="name">
    </div>
</div>
<div class="errorMessage" *ngIf="!isValid">{{item.label}} is required</div>

这里是调用上述内容的组件：

@Component({
selector: 'dynamic-form',
templateUrl: 'dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.scss']
})

export class DynamicFormComponent implements OnChanges {
    @Input() items: DynamicFormItemBase<any>[] = [];
    form: FormGroup;
    payLoad = '';

constructor(){
}

ngOnChanges(){
    this.form = this.toFormGroup(this.items);
}
ngOnInit(){
    this.form = this.toFormGroup(this.items);
}

onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
}

private toFormGroup(items: DynamicFormItemBase<any>[] ) {
    let group: any = {};
    items.forEach(item => {
        if(item.value.items){
            // console.log('has an internal item');
        }
        group[item.key] = new FormControl(item.value || '', item.required ? Validators.required : null);
        // console.log(item.value, 'has an internal item');
    });
    return new FormGroup(group);
}
}

再次澄清一下，我调用了一个 api 来获取将有多少表单及其名称。然后一个 api 调用按名称获取每个表单的布局（来自第一个 api 调用）。所有表格都可以构建。然后我有第三个 api 调用，它返回该表单的配置数据；我需要将此数据绑定到每个特定表单。

我无法创建典型的 ng-model="name" name="ng-model" #name 数据绑定方式。或者至少我不知道如何动态实现它。

 <tab class="{{module.name}}-tab" *ngFor="let module of Modules; let i = 

index" heading="{{module.displayName}}" (select)="beforeChange(module.name)">
 <div class="dynamic-form" > 
<dynamic-form [items]="items" >Loading...</dynamic-form> 
</div>

其中 items 是从 api 返回的。它的结构如下： 第一次调用是这样的

ModuleList  [{"name":"moduleName","displayName":"Module Name","enabled":true}]

其他一些不相关的代码运行，然后使用 maduleName 的参数进行 api 调用以返回布局

Array[
    0:Array[
        0:DynamicFormItemBase[
        controlType:"text"
        key:"inputID"
        label:"Input Id"
        order:1
        required:true
        value:ConfigItem [
            displayName:"Input ID"
            items:undefined
            name:"inputID"
            required:true
            type:"text"]
        ]
    ]

thirst API 调用（表单构建后）会调用不同的 api 方法，参数相同的 moduleName，并返回这样的对象

Object
    inputID:""
    inputID:1
    inputID:""
    inputID:"default text"
    enabled":true

其中每个 inputID 实际上是来自第二个 api 调用的标签 ID，而 enabled:true 应该针对第一个 api 调用的模块（当前存储在会话存储中）（如果数据不同，我将需要更新存储的项目）。

其中 api: items 被传递到动态表单组件中

<tab class="{{module.name}}-tab" *ngFor="let module of dpsModules; let i = index"
                  heading="{{module.displayName}}" (select)="beforeChange(module.name)">
                <div class="dynamic-form"  >
                    <dynamic-form [items]="items"  >Loading...</dynamic-form>
                </div>
            </tab>

Answer 1

我从您的问题中收集到的内容是否正确，您从 third API 获得的数据应该具有您想要应用于根据您获得的信息构建的表单组的值在您的秒 API 调用中。

如果这是正确的，那么您需要遍历第三个 API 调用的结果并将值应用到表单组（应该在您开始时构建）。

我假设您熟悉 JavaScript/Typescript 中的循环/迭代。

我还将假设来自第三个 API 调用的数据具有一个字段或值，这将允许您识别需要将其值分配给的表单控件。对于这个演示，我将使用item.key 作为链接令牌。

这是您需要尝试的伪代码：

for each item.key 
  this.form.controls[item.key].value = item.value;

this.form 是您的组件中已有的东西。您可以使用其中的controls 集合以及一个索引值（在本例中为item.key）来读取或分配控件的value。

如果您没有可以在第三个 API 调用中提供表单组和数据之间的链接的东西，那么绑定它们可能会很困难，如果不是不可能的话。如果你有的不仅仅是一个键，比如一个键和描述，你可以通过一些简单的连接来使用它。

希望对你有帮助！