角型グループ、removeat（0）フォームグループ内の最初の2番目のコントロールを削除する

Question

x個のコントロールとそれを削除する対応するボタンを持つformarrayがありますが、他のすべてのボタンは機能しますが、 2番目のものは最初のものではありません。ここ

は私のテンプレートコードであり、あなたがコントロールを削除ボタンを見つけることができるならば、あなたはCtrl-F、ここで色

<form [formGroup]="myForm" novalidate (ngSubmit)="submitModal(myForm)"> 
    <div class="form-group"> 
     <label>Routine Name</label> 
     <input type="text" formControlName="routineName" value="{{routine.routineName}}"> 

     <small *ngIf="!myForm.controls.routineName.valid" class="text-danger"> 
      Name is required (minimum 6 characters). 
     </small> 
    </div> 

    <ion-card formArrayName="subroutines"> 
     <ion-card-content *ngFor="let rout of myForm.controls.subroutines.controls; let i=index"> 
      <ion-row [formGroupName]="i"> 
       <ion-col> 
        <ion-label>Set {{i+1}}</ion-label> 
       </ion-col> 
       <ion-col> 
        <ion-input type="text" formControlName="setExercise" placeholder="Exercise" value="{{routine.sets[i].setExercise}}"></ion-input> 
        <small [hidden]="myForm.controls.subroutines.controls[i].controls.setExercise.valid"> 
         Set Exercise is required 
        </small> 
       </ion-col> 
       <ion-col> 
        <ion-input type="number" formControlName="repAmount" min="0" value="{{routine.sets[i].repAmount}}"></ion-input> 
       </ion-col> 
       <ion-col> 
        <ion-input type="number" formControlName="setTime" min="0" value="{{routine.sets[i].setTime}}"></ion-input> 
       </ion-col> 
       <ion-col> 
        <button ion-button color="danger" *ngIf="myForm.controls.subroutines.controls.length > 1" (click)="removeSubRoutine(i)"> <ion-icon name="trash"></ion-icon> </button> 
       </ion-col>   
      </ion-row> 
     </ion-card-content> 
    </ion-card> 

    <div class="margin-20" *ngIf="myForm.controls.subroutines.controls.length < 10"> 
     <a (click)="addSubRoutine(true)" style="cursor: default"> 
     Add another set + 
     </a> 
    </div> 
    <button ion-button type="submit" [disabled]="!myForm.valid">Submit</button> 
</form> 

とコンストラクタでフォームを作成し、最後の関数である私のtypescriptですが、あります私

@IonicPage() 
@Component({ 
    selector: 'page-routine', 
    templateUrl: 'routine.html', 
}) 
export class RoutinePage { 
    public myForm: FormGroup; 
    edit: boolean; 
    routine: RoutineModel; 

    constructor(public viewCtrl: ViewController, public navParams: NavParams, private _fb: FormBuilder) { 
    let rout = new SubRoutine("",0,0); 
    this.routine = new RoutineModel("", [rout]); 

    this.myForm = this._fb.group({ 
     routineName: ['', [Validators.required, Validators.minLength(6)]], 
     subroutines: this._fb.array([ 
     this.initSubRoutine(), 
     ]), 
     rid: [''] 
    }); 

    if(navParams.get('routine') != null) 
    { 
     this.edit = navParams.get('edit'); 
     this.routine = navParams.get('routine'); 

     this.myForm.patchValue({ 
     routineName: this.routine.routineName, 
     rid: this.routine.rid 
     }) 

     for(var i = 0; i < this.routine.sets.length-1; i++) 
     { 
     this.addSubRoutine(false); 
     } 
    } 
    } 

    initSubRoutine(){ 
    return this._fb.group({ 
     setExercise:['', Validators.required], 
     repAmount:[''], 
     setTime:[''] 
    }); 
    } 
    addSubRoutine(addSub){ 
    if (addSub == true) 
    { 
     let rout = new SubRoutine("default",0,0); 
     this.routine.sets.push(rout); 
    } 
    const control = <FormArray>this.myForm.controls['subroutines']; 
    control.push(this.initSubRoutine()); 
    } 

    removeSubRoutine(i: number){ 
    console.log(i); 
    const control = <FormArray>this.myForm.controls['subroutines']; 
    control.removeAt(i); 
    } 

Answer 1

でコントロールを削除する1は、コンストラクタで、私の初期の、その問題を修正し、それが完璧に動作しますので、私のthis.routineサブルーチンアレイと私のフォームの配列は、異なるサイズでしたが判明します。