动态创建表格Angular2

时间:2016-11-10 18:43:05

标签: forms angular

我有一个包含表单字段以及数据类型/长度/等的表。我需要做的是通常从我的数据库中的数据生成一个表单。然后在表单提交上,将表单序列化为JSON。我对Angular2比较陌生,所以对最佳实践的任何建议也都是有益的。

基本上,像这样的所有输入都是动态生成的:

<form #form="ngForm" (ngSubmit)="SaveRow(form)" novalidate>
            <div class="modal-body form-horizontal">

                <div class="form-group row" *ngFor="let column of GetColumns(true)">
                    <div class="col-lg-4 col-md-4 col-xs-12 text-right text-left-xs text-left-sm">
                        <label attr.for="{{column.Name}}" class="control-label">{{column.Name}}<span *ngIf="!column.Nullable">*</span>:</label>
                    </div>
                    <div class="col-lg-8 col-md-8 col-xs-12">
                        <input id="{{column.Name}}" name="{{column.Name}}" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="text-left">
                    <button type="button" class="btn btn-danger" *ngIf="IsExisting()" (click)="DeleteRow()">Delete</button>
                    <span class="pull-right text-right">
                        <button class="btn btn-default" id="btnCancel" type="button" (click)="CancelAdd()">Cancel</button>
                        <input type="submit" class="btn btn-primary" value="Add Row" *ngIf="!IsExisting()" />
                        <input type="submit" class="btn btn-primary" value="Update Row" *ngIf="IsExisting()" />
                    </span>
                </div>
            </div>
        </form>

在我的.ts中,我有这个:

SaveRow(form) {
        if (form.valid) {
            var data = new FormData(form);
            console.log("FORM: ");
            console.log(form);
            console.log("DATA: ");
            console.log(data);
        }
    }

但我不相信输入值对会显示在正在提交的表单对象中。

0 个答案:

没有答案