Question

我从一组JSON对象生成表单。我的HTML模板如下所示：

<ul>
    <li *ngFor="let module of inputModules">
        <form (ngSubmit)="onSubmit(module)">
            {{module.name}}
            <ul>
                <li *ngFor="let arg of module.args">
                    <input type="file" id="{{ arg.name }}">
                    <p>{{ arg.description }}<p>
                </li>
            </ul>
            <button type="submit">Run</button>
        </form>
    </li>
</ul>

如您所见，我已经获得了一个模块列表，每个模块都有他们需要的文件列表。我使用它在同一页面上快速显示大量表单。

我想以最直接的方式发布这些表单＆＃34;提交＆＃34;及其输入。我不确定如何使用＆＃34;双向＆＃34; [(ngModel)]当我的表单按程序生成时。

理想情况下，我想要的是一种方式来说明＆＃34; POST这个表单＆＃34;，而不必使用双向数据绑定，这似乎是不可能的，因为我的表单是如何创建的。

我的服务InputService如下所示：

@Injectable()
export class InputService {
    ...

    runModule(name): Promise<string> {
        var url = this.runModuleURL + name;
        var params = ???

        return this.http
            .post(url, params, {headers: this.headers})
            .toPromise()
            .then(res => res.json())
            .catch(this.handleError);
    }

    handleError(): void {
        ...
    }
}

我的组件看起来像这样：

export class InputComponent implements OnInit {    
    onSubmit(module): void {
        // console.log(this.formData);
        this.inputService.runModule(module.name).then(data => console.log(data));
    }
}

提交在for循环中生成的表单

0 个答案: