输入数组角度7

Question

我有一个数组和任何输入，我希望在提交时获得输入中该数组的所有值

<div *ngIf="this.exercises.length != 0" >
  <div class="row" *ngFor="let exercise of exercises; let i = index">
    <div class="col lg-3">
      {{ exercise.name }}
    </div>
    <div class="col lg-3">
      <input matInput type="text" placeholder="0" formControlName="serie">
    </div>
    <div class="col lg-3">
      <input matInput type="text" placeholder="0" formControlName="repetition"> {{i}}
    </div>
    <div class="col lg-3">
      <input matInput type="text" placeholder="0" formControlName="weigth">{{i}}
    </div>
  </div>
</div>

如何获取输入中的所有值？

​

​

Answer 1

您可以像这样使用FormGroup

<div *ngIf="this.exercises.length != 0" >
  <form [formGroup]="itemForm" >
  <div class="row" *ngFor="let exercise of exercises; let i = index">
    <div class="col lg-3">
      {{ exercise.name }}
    </div>
    <div class="col lg-3">
      <input matInput type="text" placeholder="0" formControlName="serie{{i}}">
    </div>
    <div class="col lg-3">
      <input matInput type="text" placeholder="0" formControlName="repetitionserie{{i}}"> {{i}}
    </div>
    <div class="col lg-3">
      <input matInput type="text" placeholder="0" formControlName="weigthserie{{i}}">{{i}}
    </div>
  </div>
  </form>
</div>

其次，为表单名称添加itemForm属性，并在ts文件中随时调用FormGroup的值，如

itemForm: FormGroup;
...

ngOnInit(){
  let index=0;
  this.exercices.forEach(controlName =>
    this.itemForm.addControl('serie' + index, new FormControl(''));
    this.itemForm.addControl('repetitionserie' + index, new FormControl(''));
    this.itemForm.addControl('weigthserie' + index, new FormControl(''));
    index++;
  );
}

onSubmit(){
   let formValue = this.itemForm.value;
   ....
}

Answer 2

拉斐尔，在FormArray中思考

首先创建一个返回formGroup的函数和一个作为FormArray的变量

formArray:FormArray；

createGroup(data:any)
{
   data=data || {serie:0,repetition:0,weigth:0}
   return new FormGroup({
       serie:new FormControl(data.serie),
       repetition:new FormControl(data.repetition),
       weigth:new FormControl(data.weigth),
   }))
}

其次，在ngOnInit中，使用您的formArray练习创建阵列。您可以循环练习，并使用推送或使用地图

ngOnInit()
{
    this.formArray=new FormArray(this.exercises.map(x=>{
        return this.createGroup(null)
    })
}

您可以简单地迭代FormArray.controls。(*)

<form *ngIf="formArray" [formGroup]="formArray" (submit)="submit(formArray)">
    <div *ngFor="let group of formArray.controls;let i=index" [formGroup]="group">
        {{exercises[i]}}
        <input formControlName="serie">
        <input formControlName="repetition">
        <input formControlName="weigth">
    </div>
    <button type="submit">submit</button>
</form>

您可以在stackblitz中查看代码

(*)是的，有几种方法可以迭代FormArray。子句是FormGroup中的FormArray，我们使用

<form [formGroup]="formGroup">
  <div formArrayName="formArray">
      <div *ngFor="let group of formGroup.get('formArray').controls; let i = index;"
           [formGroupName]="i">
           <input formControlName="...">
           <input formControlName="...">
             ...
      </div>
  </div>
</form>

但是如果我们只有一个formArray，我们可以简单地在formArray.controls上循环，并指出formGroup是我们迭代的变量。我们正在用[formGroup]="group"取代[formGroupName]="i"