Winkelformgruppe, Entfernen (0) Entfernen der zweiten nicht ersten Kontrolle in Formulargruppe

Question

Ich habe ein Formarray mit x Anzahl der Steuerelemente und eine entsprechende Schaltfläche, die sie entfernt, aber während alle anderen Tasten funktionieren, entfernt die Schaltfläche für das erste Steuerelement 2. nicht der erste.

hier ist mein Template-Code und Sie können auf die Schaltfläche, die Kontrollen finden, wenn Sie Strg-F Farbe

<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> 

und hier ist mein Typoskript, das die Form im Konstruktor erstellt und die letzte Funktion ist entfernt eine, die Kontrolle bei i

@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

entfernt Stellt sich meine this.routine Subroutinen Array und meine Formen Array waren verschiedene Größen, wegen meiner Initialisierung im Konstruktor heraus, dass Problem behoben und es funktioniert perfekt.