選択ボックスはここで後の反応性フォームのコントロールを削除

Question

UIを更新していない私は
をしたい私は機能入力と製品の反応性形を作るしようとしています"@angular/cli": "1.2.6"、"@angular/core": "^4.0.0"

を使用しています。フォーム内で、「機能を追加」ボタンをクリックすると、「タイプ」の選択ボックスを含む新しい機能列が表示されます。ユーザーが機能列内の「削除」ボタンをクリックすると、その機能列が削除されます。

何の問題私はこの問題は、私が最初と最後の特徴列間における特徴列を削除しようとすると、formControlが正常に正しい値で更新されている
に会いました。ただし、削除された機能列の選択ボックスのUIは、今後の次の機能列に移行します。

私がターゲット特徴列が削除されると
を持つことを期待何を、今後の機能の欄のUIは、正しい値で上がるだろう。

サンプル
1. 2番目のフィーチャの列を削除しようとしています。 2. formControlは2番目の機能を正常に削除しました。 UIの2番目の機能列が正常に削除されました。ただし、3番目のフィーチャの列は上に移動し、スペースを削除されたフィーチャの選択ボックスの値に置き換えます。

私のコードは次の通りである：

製品-form.component.ts

formDOM; 
features = []; 
featureTypes = [ 
    { id: "pros", name: "pros" }, 
    { id: "cons", name: "cons" }]; 

ngOnInit() { 
    this.formDOM = this.formBuilder.group({ 
    // Have other field.... 
    feature: this.formBuilder.array([]) 
    }); 
} 

patchSingleFeature(feature: object): FormGroup { 
    let returnObject = this.formBuilder.group({ 
    type: (feature && feature['type']) 
    // some other field also.... 
    }); 

    this.features.push("feature"); 
    return returnObject; 
} 

addFeature(): void { 
    let featureControl = <FormArray>this.formDOM.controls['feature']; 
    featureControl.push(this.patchSingleFeature(new Feature())); 
} 

removeFeature(x: number): void { 
    let numberOfFeature = this.features.length; 
    let featureControl = <FormArray>this.formDOM.controls['feature']; 
    featureControl.controls.splice(x, 1); 
    this.features.splice(x, 1); 
} 

製品-form.component.html

<div class="form" [formGroup]="formDOM"> 
    <div class="col-xs-12">Features</div> 
    <div *ngFor="let feature of features; let x = index; "> 
    <feature-input [x]="x" [featureTypes]="featureTypes" [form]="formDOM" (clickEvent)="removeFeature($event)"></feature-input> 
    </div> 
    <button (click)="addFeature()">Add Feature</button> 
</div> 

機能-input.component.html

<div class="feature-input" [formGroup]="form"> 
    <div formArrayName="feature"> 
    <div [formGroupName]="x"> 
     <select formControlName="type"> 
     <option value="" disabled>-- Select Feature Type --</option> 
     <option *ngFor="let type of featureTypes" [value]="type.id">{{ type.name }}</option> 
     </select> 
    </div> 
    </div> 
</div> 

機能-input.component.ts

@Input() form: FormGroup; 
@Input() featureTypes: Array<object>; 
@Input() x: number; 
@Output() clickEvent new EventEmitter<number>(); 

removeFeature(x) { this.clickEvent.emit(x); } 

Answer 1

私はあなたのコードにいくつかの変更を行います。私は全体のformarrayを子コンポーネントに送り、そこでそれを繰り返します。 JSではオブジェクトが変更可能であるため、EventEmitterは必要ありませんが、親に何も出さずに子で削除を実行できます。あなたの子供のテンプレートその後、

<feature-input [featureTypes]="featureTypes" [formGroup]="formDOM"></feature-input> 

は、入力フィールドに適切な変更を行い、そして：あなたは、ネストされたフォーム・グループを持っていないので、

だからこのケースでは、子供にフォーム全体を渡します次のようになります。removeFeatureで

<div [formGroup]="formGroup"> 
    <div class="feature-input" formArrayName="feature"> 
    <div *ngFor="let ctrl of formGroup.controls.feature.controls; let i = index" [formGroupName]="i"> 
     <select formControlName="type"> 
     <option value="" disabled>-- Select Feature Type --</option> 
     <option *ngFor="let type of featureTypes" [value]="type.id">{{ type.name }}</option> 
     </select> 
     <button (click)="removeFeature(i)">Remove</button>  
    </div> 
    </div> 
</div> 

我々だけでフォームグループのインデックスを渡すと、フォームの配列のために利用可能である機能removeAt、使用：

を

removeFeature(index) { 
    this.formGroup.controls.feature.removeAt(index) 
} 

これだけです！ここにデモがあります：https://plnkr.co/edit/kZComoNNfsbCjmVnGt1F?p=preview