私は最近Angular4反応性フォーム上で起動

配列の異なる検証と反応するフォームの配列を作成し、私は構造の下に基づいて、フォームの配列を作成したい私は最近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>

出典

2017-09-16 vamsi krishna

ここで検証規則はどこですか？ –

@ AngularInDepth.com JSONのシステム値に基づいて検証を行いたい場合は、 "System"： "phone"が電話番号をトリガーする必要があると仮定し、上記のシナリオで検証ルールをどこに入れるか混乱します –

'FormGroup'インスタンスを宣言しますか？ – yurzui

あなたはこれを達成するための動的なフォーム、https://angular.io/guide/dynamic-formを、使用することができ非常に参考になります。それぞれの入力タイプ（ケースシステムでは - 電話、電子メール、ファックス）を別々のコンポーネントとして作成し、コンポーネントに検証を追加すると、シナリオを達成するのに役立ちます。参照：https://toddmotto.com/angular-dynamic-components-formsは、この種の動的フォームを実現する方法の良い例を示しています

出典

2017-11-27 10:12:01 crystalthinker

私は最近Angular4反応性フォーム上で起動

答えて

関連する問題