3

我最近开始使用 Angular4 反应式表单，我想创建一个基于以下结构的表单数组

"ContactPoints":
[{"ContactPointID":33,"EntityID":9,"System":"phone","Value":"1234567890","Use":"work","Rank":1,"InUseStart":"2017-07-14T00:00:00","InUseEnd":"2017-10-22T00:00:00"},
{"ContactPointID":34,"EntityID":9,"System":"phone","Value":"1234567890","Use":"home","Rank":1,"InUseStart":"2017-07-14T00:00:00","InUseEnd":"2017-10-22T00:00:00"},
{"ContactPointID":35,"EntityID":9,"System":"fax","Value":"1234567890","Use":"work","Rank":1,"InUseStart":"2017-07-14T00:00:00","InUseEnd":"2017-10-22T00:00:00"},
{"ContactPointID":36,"EntityID":9,"System":"email","Value":"kishore@abc.com","Use":"work","Rank":1,"InUseStart":"2017-07-21T00:00:00","InUseEnd":"2017-10-29T00:00:00"},
{"ContactPointID":37,"EntityID":9,"System":"email","Value":"kishore@abc.com","Use":"home","Rank":1,"InUseStart":"2017-07-21T00:00:00","InUseEnd":"2017-10-29T00:00:00"}],

下面是 HTML 语法，我需要在值和系统中获取各自的输入值，并且使用将是基于系统的硬编码值和验证，实现这一点的任何建议都将非常有帮助

 <div class="col-md-4" formArrayName="ContactPoints">
                <div class="form-group form-group-default  " formGroupName=0>
                    <label class="control-label">Main Number</label>
                    <input type="text" class="form-control" formControlName="Value">
                </div>
            </div>

<div class="col-md-4" formArrayName="ContactPoints">
                    <div class="form-group form-group-default  " formGroupName=1>
                        <label class="control-label">Main Number</label>
                        <input type="text" class="form-control" formControlName="Value">
                    </div>
                </div>
4

1 回答 1

0

您可以使用动态表单https://angular.io/guide/dynamic-form来实现此目的。将每种输入类型（在您的案例系统中：电话、电子邮件、传真）作为单独的组件并在组件中添加验证将帮助您实现您的场景。参考：https ://toddmotto.com/angular-dynamic-components-forms给出了如何实现这种动态表单的一个很好的例子

于 2017-11-27T10:12:01.347 回答