Question

我有一个带有x个控件的formarray和一个删除它们的相应按钮，但是当所有其他按钮都工作时，第一个控件的按钮会删除第二个按钮而不是第一个按钮。

这是我的模板代码，你可以找到按ctrl-f color

删除控件的按钮

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

这是我的打字稿，它在构造函数中创建表单，最后一个函数是在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

原来我的this.routine子程序数组和我的表单数组是不同的大小，因为我在构造函数中初始化，修复了这个问题并且它完美地工作。

Angular formgroup，removeat（0）删除formgroup

1 个答案: