アングル2/4アライメント付き反応形式

Question

私は最初のアングル2アプリケーションを作成しようとしています。そしていつものように、私は即座に私が作りたいモデルに悩まされています。私は、芸術家の間に親子関係を作るためのモデルを持っています。 例えば：私は次のようにいくつかの子オブジェクトで私のバスケットに記事を追加したい：

typescriptですで

IArticle[] = [ 
{ 
    id: 1, 
    parentArticle: 1234596, 
    description: 'some description for parent' 
    children: [ 
     { 
      id: 1, 
      childArticle: 123457, 
      childDescription: 'some description for first child' 
     }, 
     { 
      id: 2, 
      childArticle: 123467, 
      childDescription: 'some description for second child' 
     }, 
     ..... 
    ] 

私は私の記事のためのインタフェースを定義しました。子オブジェクトは、わずかに異なる独自のインターフェースを持っています。

これらの子オブジェクトは小さな固定セットなので、これらの子をドロップダウンリストを使用して追加したいと考えています。私は、これらのオブジェクトをクリックして削除するボタンとして表示するようにします（オプションのモーダルポップアップでオプションです）。だから私はドロップダウンリストの横にあるボタンは、ドロップダウンリストの値を配列に追加するべきだと思った。これは正常な型付き配列に値を追加したときにうまく動作します。しかし今、私はこの配列を「反応型」にまとめたいと思います。

これらのリアクティブフォームで配列を操作する方法と、フォームコントロールオブジェクトにそれらをラップする方法を教えてもらえますか？私はFormArray "control"を見ましたが、これが私が探しているものであるかはわかりません。これは一連のFormControlsを継ぎ合わせています。データの配列ではありません。おそらく反応型は正しい決定ではないでしょうか？うまくいけば誰かが私を正しい軌道に乗せることができます。

マイHTMLテンプレートは、（コードから剥離ブートストラップコード）

<form autocomplete="off"> 
     <input type="text" Placeholder="Article Number" /> 
    <div > 
     <button *ngFor="let child of children"> 
     <span class="glyphicon glyphicon-remove-circle text-danger"></span> 
     {{ child.childArticle }} 
     </button> 
    </div> 
    <div > 
     <select class="form-control inline"> 
      <option value="">Select Service..</option> 
      <option *ngFor="let serviceOption of serviceOptions" [ngValue]="serviceOption.serviceNumber"> 
       {{serviceOption.serviceDescription}} 
      </option> 
     </select> 
      <button (click)="onAddService()"> 
      Add 
      </button> 
    </div> 
    <div> 
     <button type="submit"> 
     Save 
     </button> 
    </div> 
    </form> 

種類よろしくを、以下の通りです。

------ typescriptですコード：

export class NewServiceComponent implements OnInit { 
    newServiceForm: FormGroup; 
    serviceOptions: IServiceArticle[] = [ 
    { 'id': 1, 'serviceNumber': 123456, serviceDescription: 'description 1' }, 
    { 'id': 2, 'serviceNumber': 456789, serviceDescription: 'description 2' }, 
    { 'id': 3, 'serviceNumber': 123456, serviceDescription: 'description 3' }, 
]; 
selectedServiceOption: IServiceArticle; 
newArticle: IService; 

constructor(private _fb: FormBuilder) { 
} 

createForm() { 
this.newServiceForm = this._fb.group({ 
    services: this._fb.array([]), 
    articleNumber: this._fb.control(null, Validators.required), 
}) 
} 

ngOnInit() { 
    this.createForm(); 
} 

onAddService() { 
    const arrayControl = <FormArray>this.newServiceForm.controls['services']; 
    let newgroup = this._fb.group({ 
    serviceNumber: this.selectedServiceOption.serviceNumber, 
    serviceDescription: this.selectedServiceOption.serviceDescription, 
    }) 
    arrayControl.push(newgroup); 
} 
} 

Answer 1

反応フォームを作成するには、まずメインフォーム・グループを持っていて、フォームグループ内のformArray制御を持つことになります。これを実行すると、既存の子をそのformArrayに追加し、それらの子はそれぞれ独自のformGroupになります。

constructor(private fb: FormBuilder){ 
    myTypeScriptChildrenObjects = functionToGetTheChildrenArray(); 
} 
... 

createForm(){ 
    this.form = this.fb.group({ 
     childrenArray: this.fb.array([]) 
    }) 

    const arrayControl = <FormArray>this.orderForm.controls['childrenArray']; 
    this.myTypeScriptChildrenObjects.forEach(item => { 
     let newGroup = this.fb.group({ 
      prop1: [item.prop1], 
      prop2: [item.prop2], 
      prop3: [item.prop3] 
     }) 
     arrayControl.push(newGroup); 
    }) 
} 

あなたのhtmlにこれらを巡回するときは、このような何かを：

<select formArrayName="childrenArray"> 
      <option [formGroupName]="i" *ngFor="let line of form.controls['childrenArray'].controls; index as i" text="prop1" value="prop2"> 

Answer 2

は、次のコードを試してみましたが、それが必要として動作するように見えた....

についてこれはFOの内側にあるので、

<form [formGroup]="newServiceForm"> 

と：フォーム、あなたはそう、[formGroup]を追加する必要があるだろうrmgroup今、フォームコントロールなしでselectの[(ngModel)]を受け付けません。 [ngValue]="serviceOption"

はその後、我々は選択した値を追加し、あなたが行っているように、フォームの配列にプッシュ：我々はまた、私は、オブジェクトを参照するために[ngValue]を変更します[ngModelOptions]="{standalone: true}"

を使用して、これをバイパスすることができます。

テンプレートで、このフォーム配列を繰り返し処理します。すべてのすべてで、テンプレートは次のようになります。あなたはそれらの長いパスを避けることができるように

<form [formGroup]="newServiceForm"> 
    <div formArrayName="services"> 
    <button *ngFor="let child of newServiceForm.controls.services.controls; 
     let i = index" [formGroupName]="i"> 
     <span [innerHtml]="child.controls.serviceDescription.value"> </span> 
    </button> 
    </div> 

<select [(ngModel)]="selectedServiceOption" [ngModelOptions]="{standalone: true}"> 
    <option>Select Service..</option> 
    <option *ngFor="let serviceOption of serviceOptions" [ngValue]="serviceOption"> 
      {{serviceOption.serviceDescription}} 
    </option> 
</select> 
<button (click)="onAddService()"> Add </button> 
</form> 

フォームコントロールは、変数に設定することができます。

コメントで説明したように、これはユーザーが同じ価値を何度も選択できるという事実を考慮に入れていませんが、問題とは関係ありませんでした。