2017-09-16 10 views
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":"[email protected]","Use":"work","Rank":1,"InUseStart":"2017-07-21T00:00:00","InUseEnd":"2017-10-29T00:00:00"}, 
{"ContactPointID":37,"EntityID":9,"System":"email","Value":"[email protected]","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> 
+0

유효성 검사 규칙은 어디에 있습니까? –

+0

@ AngularInDepth.com "System": "phone"이 전화 번호를 트리거해야하는 경우 JSON의 시스템 값에 따라 유효성 검사가 수행되기를 원합니다. 유효성 검사 및 위 시나리오의 유효성 검사 규칙을 어디에 넣을 지 혼란 스럽습니다. –

+0

'FormGroup' 인스턴스를 선언합니까? – yurzui

답변

0

당신이 이것을 달성하기 위해 동적 양식, https://angular.io/guide/dynamic-form을 사용할 수 있습니다 매우 도움이 될 것입니다. 각 입력 유형 (귀하의 경우 시스템 : 전화, 이메일, 팩스)을 별도의 구성 요소로 만들고 구성 요소에 검증을 추가하면 시나리오를 달성하는 데 도움이됩니다. 참조 : https://toddmotto.com/angular-dynamic-components-forms은 이러한 종류의 동적 양식을 달성하는 방법에 대한 좋은 예입니다.