角反応型の隠れた入力はバインディングではありませんか？

Question

私は自分のデータモデルからコントロールを作成する反応的なフォームを持っています。最初は、すべてが「processingOrder」と呼ばれるデータポイントによってソートされます。

フォーム配列内では、*ngForを使用してコントロールを反復処理し、インデックスを隠したform controlに格納しています。私のテーブル内でレコードを上下に動かすと、隠しフィールドに適用されているインデックスには、モデルの変更が反映されるはずです。

<form [formGroup]="rulesForm" (ngSubmit)="onSubmit(form)"> 
<div formGroupName="ruleData"> 
    <div formArrayName="rules"> 
     <div *ngFor="let child of rulesForm.controls.ruleData.controls.rules.controls; let i = index"> 
     <div formGroupName="{{i}}"> 
      <input type="text" placeholder="Rule Name" formControlName="name"/> &nbsp; 
      <input type="text" placeholder="Rule Description" formControlName="description"/> &nbsp; 
      <input type="text" placeholder="Processing Order" formControlName="processingOrder"/> &nbsp; 
      <button class="button" (click)="move(-1, i)">Move Up</button> &nbsp; 
      <button class="button" (click)="move(1, i)">Move Down</button> 


      <!-- Why doesn't this update my model when it gets a new index? --> 
      <input type="hidden" formControlName="processingOrder" [value]="i"> 


     </div> 
     </div> 
    </div> 
</div> 
<button type="submit">Submit</button> 
</form> 

私は私のplunkerで、処理順序番号は常に1-5順番に残るべきとするたびに、ルールは、モデルは、それが受信した新しいインデックスに更新され、上下に移動されることを期待しているだろう

。

https://plnkr.co/edit/ZCgHPEaUM00aLxM6Sf9t?p=preview

Answer 1

formControlNameディレクティブは、コントロールのモデルにバインドされた入力を持ち、コードから変更すると、すべてのインスタンスが表示されます。だから、ちょうど[ngModel]="i + 1"で[value]="i"を置き換える：

<input type="hidden" formControlName="processingOrder" [ngModel]="i + 1"> 

をHTML入力のプロパティvalue（[value]="i + 1"）に結合すると、ビューに現在の入力を更新しますが、コントロールのモデルを更新しません、ので、同じ制御で別のインスタンスに影響を与えません。名。

また、非表示の入力を削除し、テキスト入力に[value]="i + 1"を置くことができます。

<input type="text" 
     placeholder="Processing Order" 
     [ngModel]="i + 1" 
     formControlName="processingOrder"/> 

processingOrder値は常にこれがうまく動作しているようだngForのインデックスi

Answer 2

それは基本的にformArray長に基づいて昇順にprocessingOrder番号を再割り当て、アップ/ダウン方式を扱う移動の底部に

move(shift, currentIndex) { 
    const rules = this.rulesForm.get(['ruleData', 'rules']); 

    let newIndex: number = currentIndex + shift; 
    if(newIndex === -1) { 
    newIndex = rules.length - 1; 
    } else if(newIndex == rules.length) { 
    newIndex = 0; 
    } 

    const currentGroup = rules.at(currentIndex); 
    rules.removeAt(currentIndex);; 
    rules.insert(newIndex, currentGroup) 

    // logic to re-calculate processingOrder in the correct ascending order 
    let i = 0; 
    this.rulesForm.get(['ruleData', 'rules']).controls.forEach((elem) => { 
    i++; 
    elem.get('processingOrder').setValue(i); 
    }); 
} 

これを追加します。それが役に立てば幸い。

hiddeninputは、これが機能するためにテンプレートには必要ありません。また、複数の入力コントロール（ここでは、 'processingOrder'に 'text'と 'hidden'の入力要素）を同じformControlNameで指定すると、反応する形式で期待通りに動作しない可能性があります。