时间戳

首页 > 解决方案 > FormArray multiple get datain onSubmitForm ionic

angular - FormArray multiple get datain onSubmitForm ionic

问题描述

I have created form with 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)
  }

in my html i have 

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

But when i want to get from onSubmitForm()

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

I have this error Cannot invoke an expression whose type lacks a call signature. Type 'FormArray' has no compatible call signatures.

How i can get all data put in formBuilder.array

标签： angularionic-frameworkformbuilder

解决方案

getPiecesArrayarray 是一个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>

这是您参考的示例 StackBlitz。

推荐阅读