I recently started on Angular4 reactive Forms, i want to create a form array based on below Structure
"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"}],
Below is HTML Syntax, where i need to get respective input values in value and system and use will be hard-coded values and validations based on system, any suggestions in achieving this will be very helpful
<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>