FormArray multiple get data in onSubmit Form ionic

Question

我已经用 formBuilder 创建了表单

    this.authForm = this.formBuilder.group({
      diagnostic: ['', Validators.required],
      produit:['',Validators.required],
      pieces: this.formBuilder.array([]),
      ramassage:'',
      main:''
    });
get getPiecesArray() {
    return this.authForm.get('pieces') as FormArray;
  }

  addPiece() {

    const piece = this.formBuilder.group({
      piece: [],
      prix: [],
    })

    this.getPiecesArray.push(piece);
  }

  deletePiece(i) {
    this.getPiecesArray.removeAt(i)
  }

在我的 html 我有

<div formArrayName="pieces">
        <ion-item *ngFor="let piece of getPiecesArray.controls; let i=index" [formGroupName]="i">
            <ion-icon  item-end color="danger" name="trash"  (click)="deletePiece(i)"></ion-icon>
          <ion-item>
            <ion-input full placeholder="Piéce" formControlName="piece"></ion-input>
          </ion-item>
          <ion-item>
            <ion-input placeholder="Prix" formControlName="prix"></ion-input>
          </ion-item>
        </ion-item>
      </div>

但是当我想从 onSubmitForm() 获取时

  console.log(this.getPiecesArray().controls);
for (let control of this.getPiecesArray().controls) {
  pieces = pieces + " " + control.value;
}

我有这个错误无法调用其类型缺少调用签名的表达式。类型 'FormArray' 没有兼容的调用签名。

如何将所有数据放入 formBuilder.array

Answer 1

getPiecesArray 数组是 getter 而不是方法。所以应该这样称呼：

console.log(this.getPiecesArray.controls);
for (let control of this.getPiecesArray.controls) {
  pieces = pieces + " " + control.value;
}

但是如果你想得到所有控件的值，你可以简单地做，this.authForm.value。如果你只想要碎片的价值，你可以做 this.authForm.value.pieces

试试这个：

authForm: FormGroup;

constructor(
  public navCtrl: NavController,
  private formBuilder: FormBuilder
) {
  this.authForm = this.formBuilder.group({
    diagnostic: ['', Validators.required],
    produit: ['', Validators.required],
    pieces: this.formBuilder.array([]),
    ramassage: '',
    main: ''
  });
}

addPiece() {
  const piece = this.formBuilder.group({
    piece: [],
    prix: [],
  });
  this.getPiecesArray.push(piece);
  console.log('After Add: ', this.authForm.value);
}

onSubmitForm() {
  console.log(this.authForm.value);
}

deletePiece(i) {
  this.getPiecesArray.removeAt(i);
}

get getPiecesArray() {
  return ( < FormArray > this.authForm.get('pieces'));
}

在模板中：

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>

  <form [formGroup]="authForm" (submit)="onSubmitForm()">
    <button type="button" (click)="addPiece()">Add Piece</button>
    <div formArrayName="pieces">
      <ion-item 
        *ngFor="let piece of getPiecesArray.controls; let i=index" 
        [formGroupName]="i">
        <ion-icon 
          item-end 
          color="danger" 
          name="trash" 
          (click)="deletePiece(i)">
        </ion-icon>
        <ion-item>
          <ion-input 
            full 
            placeholder="Piéce" 
            formControlName="piece">
          </ion-input>
        </ion-item>
        <ion-item>
          <ion-input placeholder="Prix" formControlName="prix"></ion-input>
        </ion-item>
      </ion-item>
    </div>
    <button>Submit</button>
  </form>
</ion-content>

这里有一个 Sample StackBlitz 供您参考。

FormArray multiple get data in onSubmit Form ionic

FormArray multiple get datain onSubmitForm ionic

formbuilder

ionic-framework

angular